Question

我问，因为我在网上到处搜索，这是我能找到的。到目前为止，我已经能够使用以下代码在谷歌地图上制作虚线。

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'
            }],
        })

这一切都很好，但有没有办法可以制作带有虚线轮廓的Polygon对象？我试过这个，因为它不起作用

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

我认为你不能。但您可以在Polygon顶部覆盖折线。

＆＃13;

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,
    icons: [{
      icon: lineSymbol,
      offset: '0',
      repeat: '10px'
    }],
    path: path,
    map: map
  });
}

initialize();

＆＃13;

#map-canvas {
  height: 200px;
}

＆＃13;

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

＆＃13;

虚线多边形Google地图

1 个答案: