Google Maps API v3：SVG图形剪辑/缩放时消失

Question

测试链接：http://kwestievan.nl/reizen

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

如果在Safari或Chrome中查看，则会发生一些非常恼人和意外的行为。在Safari中，整个SVG图形消失超过一定的缩放级别，而在Chrome中，行尾的箭头消失，并以随机缩放级别重新出现。在Firefox和Opera中，没有发生这种情况，箭头在任何缩放级别都可见。

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

这里发生了什么？ SVG与Google地图不完全兼容，还是我做错了什么？

Answer 1

带有infoWindow Shadow的标记？ 显然，您的标记阴影设置为与infoWindow相同的值。重复变量可能吗？更改标记阴影“路径”的名称。您可能无意中使用了与infoWindow阴影路径相同的标记路径名称标识符。

我同意Star。 开始为polyLine图标创建复杂的SVG路径，当它们放置在某些位置和缩放级别时（即，当它们跨越2个地图图块时）它们会消失一半。它被归咎于测地线校正。

在Firefox中，您的SVG外线将以更大的比例随机漂浮在屏幕上。与封闭问题有关。虽然可以修复。

我不明白为什么polyLine及其图标不能位于地图图层之上，因此避免了它的特性。

基本上我浪费了很多时间，并且对将SVG放在polyLine上的结果感到非常失望。我确实想把我的公交车时刻表和测绘脚本卖给公交公司。但从图形上来说，它只是达不到标准我会觉得舒服。即，公共汽车一半消失并重新出现在下一个瓷砖上。

我现在要使用标记作为我的公交车图标，因为它们看起来位于地图上方的一层，因此没有测地线附件。

顺便说一下。您可以使用polyLine和polygon创建弧。

Answer 2

我试过但未能在SVG中嵌入Map。我在浏览器之间的行为也变得非常不同。仔细观察，Map本身就是非常复杂的SVG。浏览器处理SVG的方式肯定存在很大差异。我把这一点开发放在了后面，等待浏览器一起行动。 我知道这不是答案，只是分享经验。

Answer 3

我正在取得进步。如果您现在查看测试链接，您会发现在Chrome中，无论您处于何种缩放级别，箭头都会保持在相同位置。 Safari仍然会丢失整个SVG图形超过某个缩放级别。即使是普通的Google InfoWindow实例也存在这个问题，因为您可以在测试网站上看到最后一个标记（稍微缩小一下即可看到它）。

据此判断，我认为谷歌地图实际上存在一个错误。有人可以确认InfoWindow本身（不是阴影）在某个缩放级别（中间级别之后的某个位置）后会消失吗？像这样：