开发者

Styling a Google Maps v3 Polyline with Dashes or Dots?

I'd like to take a Google Map v3-based map with some custom polylines, and make some of those lines dotted or dashed. I can't seem to find any way of doing this. Is it possible, and if so, how开发者_如何学JAVA?


This feature has been added to Polyline options, and it's called Symbols on Polylines

Creating a dashed line looks like this (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
});

Dash length is controlled by path's +/-1, and spacing is controlled by repeat. It's a bit verbose, but very flexible.

Besides dashes, the new feature includes predefined paths for a circle, arrowheads, and the docs even include an animation demo :)

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜