用破折号或圆点设计 Google Maps v3 折线？答案

【问题标题】：Styling a Google Maps v3 Polyline with Dashes or Dots?用破折号或圆点设计 Google Maps v3 折线？
【发布时间】：2011-08-31 05:37:18
【问题描述】：

我想制作一个基于 Google Map v3 的地图，其中包含一些自定义折线，并用虚线或虚线制作其中的一些线。我似乎找不到任何方法来做到这一点。有没有可能，如果有，怎么做？

【问题讨论】：

您能否接受另一个答案作为解决方案，因为它是正确的？

标签： javascript api google-maps styling polyline

【解决方案1】：

此功能已添加到折线选项中，称为Symbols on Polylines

创建虚线如下所示 (demo)：

var lineCoordinates = [
  new google.maps.LatLng(22.291, 153.027),
  new google.maps.LatLng(18.291, 153.027)
];

var lineSymbol = {
  path: 'M 0,-1 0,1',
  strokeOpacity: 1,
  scale: 4
};

var line = new google.maps.Polyline({
  path: lineCoordinates,
  strokeOpacity: 0,
  icons: [{
    icon: lineSymbol,
    offset: '0',
    repeat: '20px'
  }],
  map: map
});

破折号长度由path 的+/-1 控制，间距由repeat 控制。它有点冗长，但非常灵活。

除了破折号，新功能还包括预定义的圆、箭头路径，文档甚至包括动画演示：)

【讨论】：

在上面的代码中绘制多边形时有效。但是一旦我完成了多边形的绘制，虚线符号就会消失。