虚线多边形谷歌地图

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

这一切都很好，但我能否用虚线轮廓线创建一个多边形对象呢？ 我尝试了这个方法，但它并不起作用。

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

- Miguel Coder

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

initialize();

#map-canvas {
  height: 180px;
}

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

- MrUpsidown

---

太好了！非常感谢！当我把它弄好时，我像个小女孩一样咯咯笑了。现在我需要添加事件处理程序，使线条在编辑形状时跟随。很有趣。 :) - Miguel Coder

需要从折线中删除 fillOpacity 属性，该属性不存在。除了自动关闭起点和终点之外，填充确实是区分多边形的关键，因此我们需要两者。 - Rick O'Shea