造型与虚线或点谷歌地图V3折线？ [英] Styling a Google Maps v3 Polyline with Dashes or Dots?

问题描述

我想借此基于v3的谷歌地图的地图与一些自定义的折线，并提出一些这些线路的点线或虚线。我似乎无法找到这样做的任何方式。是否有可能，如果是这样，怎么样？

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?

推荐答案

该功能已经被添加到折线选项，这就是所谓的<一个href=\"https://developers.google.com/maps/documentation/javascript/overlays#PolylineSymbols\">Symbols在折线

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

创建虚线看起来像这样（<一个href=\"https://developers.google.com/maps/documentation/javascript/examples/overlay-symbol-dashed\">demo):

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
});

短跑长度由路径控制的+/- 1，和间隔由控制重复。这是一个有点冗长，但非常灵活。

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

此外破折号，新的功能包括一个圆圈，箭头predefined路径以及文档甚至包括动画演示：）

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

这篇关于造型与虚线或点谷歌地图V3折线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！