ダッシュされたポリゴンGoogleマップ

Question

私はどこでもオンラインで検索したので、私は尋ねています。これまで私は次のコードでGoogleマップに破線を作ることができました。

app.config.dashSymbol = { 
    path: 'M 0,-1 0,1', 
    strokeOpacity: 1, 
    scale: 4, 
}, 

new google.maps.Polyline({ 
      map:map, 
      path:polygon.getPath ? polygon.getPath() : polygon, 
      strokeColor: vue.Projects[projectID].ContractorColor, 
      strokeOpacity:0, 
      icons:[{ 
       icon:app.config.dashSymbol, 
       offset:'0', 
       repeat:'20px' 
      }], 
     }) 

すべてうまくいきますが、破線の輪郭でポリゴンオブジェクトを作成できる方法はありますか？私は試してみましたが、うまくいきませんでした。

new google.maps.Polygon({ 
      map:map, 
      paths:polygon.getPath ? polygon.getPath() : polygon, 
      fillColor: vue.Projects[projectID].ContractorColor, 
      strokeColor:vue.Projects[projectID].ContractorColor, 
      strokeOpacity:0, 
      icons:[{ 
       icon:app.config.dashSymbol, 
       offset:'0', 
       repeat:'20px' 
      }] 
     }) 

Answer 1

私はできないと思います。しかし、ポリゴンの上にポリラインを重ねることができます。

function initialize() { 
 
    
 
    var mapOptions = { 
 
    zoom: 4, 
 
    center: new google.maps.LatLng(40, 9), 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 

 
    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 
 

 
    var path = [ 
 
    new google.maps.LatLng(39, 4), 
 
    new google.maps.LatLng(34, 20), 
 
    new google.maps.LatLng(44, 20), 
 
    new google.maps.LatLng(39, 4) 
 
    ]; 
 

 
    var lineSymbol = { 
 
    path: google.maps.SymbolPath.CIRCLE, 
 
    fillOpacity: 1, 
 
    scale: 2 
 
    }; 
 

 
    var polygon = new google.maps.Polygon({ 
 
    strokeOpacity: 0, 
 
    strokeWeight: 0, 
 
    fillColor: '#00FF00', 
 
    fillOpacity: .6, 
 
    paths: path, 
 
    map: map 
 
    }); 
 

 
    var polylineDotted = new google.maps.Polyline({ 
 
    strokeColor: '#000000', 
 
    strokeOpacity: 0, 
 
    fillOpacity: 0, 
 
    icons: [{ 
 
     icon: lineSymbol, 
 
     offset: '0', 
 
     repeat: '10px' 
 
    }], 
 
    path: path, 
 
    map: map 
 
    }); 
 
} 
 

 
initialize();

#map-canvas { 
 
    height: 200px; 
 
}

<div id="map-canvas"></div> 
 
<script src="//maps.googleapis.com/maps/api/js"></script>