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

【问题标题】：Google Maps API v3: SVG graphics clip / disappear when zoomingGoogle Maps API v3：SVG 图形剪辑/缩放时消失
【发布时间】：2012-10-06 23:37:44
【问题描述】：

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

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

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

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

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

【问题讨论】：

你见过google.maps.Polyline和google.maps.Polygon吗？如果你对路径进行编码，它比 SVG 更高效和一致，请参阅google.maps.geometry.encoding.decodePath
@PauloScardine 相信我，我已经尝试了很多东西来获得漂亮的曲线，从标记到标记带有箭头。到目前为止，我在像这样的 SVG 图形方面取得了最大的成功。内置 Polyline 和 Polygon 函数的问题在于它们不提供内置曲线选项。这有很多扩展，但它们是在地图上绘制的，而不是在屏幕上绘制的。结果：在大距离上，由于测地线校正，线会出现偏差。所以我需要用像素完全“在屏幕上”绘制。为此，我决定使用 SVG。

标签： google-maps google-chrome google-maps-api-3 safari

【解决方案1】：

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

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

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

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

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

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

顺便说一句。您可以使用折线和多边形创建弧线。

【讨论】：

【解决方案2】：

我已尝试在 SVG 中嵌入地图，但未能成功。我也在浏览器之间得到了非常不同的行为。仔细观察，地图本身就是非常复杂的 SVG。浏览器处理 SVG 的方式肯定存在重大差异。我已经把那一点开发放在次要位置，等待浏览器齐心协力。我知道这不是答案，只是分享经验。

【讨论】：

唯一的区别是我没有尝试将地图嵌入到 SVG 中，而是相反。我想在地图上绘制一个 SVG 图形。

【解决方案3】：

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

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

【讨论】：

我大量使用谷歌地图，我从来没有经历过 InfoWindows 消失，曾经