谷歌地图添加折线边框

Question

我想在折线周围添加边框，就像以下图片所示:

我能够实现它吗？是否可能？ 我已经在网上搜索了解决此问题的方案，但还没有找到。

- Brk

Answer 1

技巧在于添加两个折线，一个是粗黑色的用来做边框，另一个是绿色的，不那么厚。

这样，因为绿色的会出现在黑色的上面，但是黑色的边还是可见的，它将起到边框的作用。

以下是示例代码：

var border = new google.maps.Polyline({
    path: path,
    strokeColor: 'black', // border color
    strokeOpacity: 1.0,
    strokeWeight: 7 // You can change the border weight here
});

var line = new google.maps.Polyline({
    path: path, // /!\ same path
    strokeColor: 'green',
    strokeOpacity: 1.0,
    strokeWeight: 4
});

- nicovank

---

@Brk 我刚写了一个类似的答案。这里有一个例子：http://jsfiddle.net/4a87k/651/ - Turnip

Turnip，感谢您提供的工作示例。我已经编辑了一个样本代码，但请参见Turnip的fiddle以获取一个可工作的示例。 - nicovank

如果您选择这种方法，请记住渲染顺序并不能百分之百保证，因此最好实际设置每个折线的z-index，使用 Polyline.setZIndex(float) 更加可靠。 - Nicolás Carrasco-Stevenson

不得不使用 @NicolásCarrasco-Stevenson 提到的 zIndex 才能使它正常工作。 - Henrik Bøgelund Lavstsen

正如@NicolásCarrasco-Stevenson所提到的，我最终使用了zIndex选项来使边框工作：https://developers.google.com/maps/documentation/javascript/reference/polygon#PolylineOptions - henrykodev