使用破折号或点设置 Google Maps v3 折线的样式? [英] Styling a Google Maps v3 Polyline with Dashes or Dots?

问题描述

我想使用带有一些自定义折线的基于 Google Map 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?

推荐答案

此功能已添加到 Polyline 选项中，名为 多段线上的符号

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

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

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 :)

这篇关于使用破折号或点设置 Google Maps v3 折线的样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！