Google maps 谷歌地图API v3:SVG图形剪辑/缩放时消失

测试链接：

我在这里做的是：实现了我自己的OverlayView，用SVG在每一行的末尾用箭头从一个标记到另一个标记绘制曲线。我向地图添加了一个div元素，该元素具有一定的宽度和高度，以包含直线和箭头。然后，我将内联SVG代码放入该div中，让浏览器绘制线条和箭头

如果在Safari或Chrome中查看，会出现一些非常恼人和意外的行为。在Safari中，整个SVG图形在某个缩放级别之后消失，而在Chrome中，线条末端的箭头消失，并以随机缩放级别重新出现，看起来如此。在Firefox和Opera中，这种行为不会发生，箭头在任何缩放级别都可见

不要介意红色框和/或一些箭头的位移。这是正在进行的工作

---

这是怎么回事？SVG是否与谷歌地图不完全兼容，或者我做错了什么？

我尝试过在SVG中嵌入地图，但失败了。我也发现浏览器之间的行为非常不同。仔细看，地图本身非常复杂。浏览器处理SVG的方式当然有很大的不同。我已经把这一点的开发放在次要位置，等待浏览器一起行动。

---

我知道这不是答案，只是分享经验

我正在进步。如果您现在查看测试链接，您将看到在Chrome中，无论您处于何种缩放级别，箭头都会停留在需要非常一致的位置。Safari仍然会将整个SVG图形放松到一定的缩放级别。即使是普通的GoogleInfoWindow实例也有这个问题，你可以在测试网站上看到最后一个标记（缩小一点即可看到）

根据这一点判断，我认为谷歌地图现在实际上存在一个bug。其他人能否确认信息窗口本身（而不是阴影）在某个缩放级别（中间级别之后的某个位置）后消失？像这样：

---

带有信息窗口阴影的标记？ 显然，您的标记阴影被设置为与

infoWindow

相同的值。可能是重复变量？更改标记阴影“路径”的名称。您可能无意中使用了与

infoWindow

阴影路径相同的标识符作为标记路径名

我同意斯塔的观点。 开始为

多段线

图标创建复杂的SVG路径，当放置在特定位置和缩放级别时（即，当它们跨在2个地图分幅上时），这些图标会消失一半。这归咎于测地线校正

在Firefox中，SVG外线将在屏幕上以更大的比例随机浮动。与关闭问题有关。不过可以解决

我不明白为什么

多段线及其图标不能位于地图图层上方，从而避免其特性

基本上，我浪费了很多时间，对将SVG放置在
多段线上的结果非常失望。我确实想把我的公交计划和地图脚本卖给公交公司。但从图形上看，它并没有达到我能接受的标准。也就是说，公共汽车一半消失，另一半又出现在下一块瓷砖上

我现在将为我的总线图标使用标记，因为它们似乎位于地图上方的一个图层上，因此没有测地线附件

顺便说一下。可以使用多段线和多边形创建弧。
唯一的区别是，我没有尝试将地图嵌入SVG，而是相反。我想在地图上画一个SVG图形。你看过
google.maps.Polyline
和
google.maps.Polygon
吗？如果您对路径进行编码，那么它比SVG更有效、更一致，请参见
google.maps.geometry.encoding.decodePath
@PauloScardine相信我，我已经尝试了很多方法，从一个标记到另一个标记，用箭头绘制出漂亮的曲线。到目前为止，我在SVG图形方面取得了最大的成功。内置多段线和多边形函数的问题在于它们不提供内置曲线选项。有许多扩展，但它们绘制在地图上，而不是屏幕上。结果：由于测地校正，在较大距离上，直线会产生偏差。所以我需要完全“在屏幕上”画，用像素。为了做到这一点，我决定使用SVG。我大量使用谷歌地图，而且我从来没有经历过信息窗口的消失