Javascript 使用破折号或点设置 Google Maps v3 折线的样式?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6098947/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 20:13:51  来源:igfitidea点击:

Styling a Google Maps v3 Polyline with Dashes or Dots?

javascriptapigoogle-mapsstylingpolyline

提问by David Pfeffer

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?

我想使用带有一些自定义折线的基于 Google Map v3 的地图,并将其中的一些线设为点线或虚线。我似乎找不到任何方法来做到这一点。有可能吗,如果有,怎么做?

回答by Tina CG Hoehr

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.

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

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

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