使用破折号或点设置 Google 地图 v3 折线样式？

发布于 2024-11-09 08:52:30 字数 94 浏览 3 评论 0原文

我想要一张基于 Google Map v3 的地图，其中包含一些自定义折线，并将其中一些线设为点线或虚线。我似乎找不到任何方法可以做到这一点。可能吗？如果可能的话，如何实现？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

玉环 2024-11-16 08:52:30

此功能已添加到折线选项中，称为折线上的符号< /strong>

创建虚线如下所示 (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< 控制/代码>。虽然有点冗长，但是非常灵活。

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

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 原文

~没有更多了~