使用破折号或圆点设计Google Maps v3折线?

时间:2011-05-23 14:56:17

标签: javascript api google-maps styling polyline

我想使用一些基于Google Map v3的地图和一些自定义折线,并将其中一些线条点缀或虚线。我似乎无法找到任何办法。有可能,如果可能,怎么样?

1 个答案:

答案 0 :(得分:59)

此功能已添加到折线选项中,名为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控制。它有点冗长,但非常灵活。

除了破折号之外,新功能包括圆形,箭头的预定义路径,文档甚至包括动画演示:)