在googlemap(apiv3）上添加自定义svg层

add custom svg layer on google map (api v3)

本文关键字：添加 自定义 svg googlemap apiv3      更新时间：2023-12-29

问题出在这里，

我尝试在谷歌地图上添加一个自定义层（svg）。我选择的层非常简单，它只是一个"rect"，但迟早这些会变得更加复杂，因为路径&等等…但实际上这不是问题所在。

我终于可以在地图上添加svg并使其可见，但是，由于svg不像图像标签，我找不到像简单图像那样用谷歌地图缩放svg的方法。。。

这里有一个谷歌的例子，当你缩放（鼠标滚轮）地图时，自定义的覆盖大小也在改变：

https://developers.google.com/maps/documentation/javascript/examples/overlay-simple

这是我试图在地图上添加的svg，你会注意到div（容器）位于特定的点（lat/lng），并且在地图上用鼠标滚轮正确缩放。但是，我试图添加到其中的svg层，根本没有突出到其中，而且，在鼠标滚轮上不缩放。。。这个svg层唯一好的一点是它可以使用地图拖动。。。

svg层应该包含在定义的div中（带有bounds…）。svg是一个简单的层：

<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" class="svg-editor">
    <g>
        <rect id="svg_5" height="181" width="311" y="95.25" x="47.75" stroke-width="5" fill="#FF0000"/>
    </g>
</svg>

小提琴在这里：

http://jsfiddle.net/7b3byzrf/27/

谢谢你的帮助！

如果你想让svg图像正确缩放，你需要有

  • 一个viewBox（你已经说了，这个部分还可以）
  • svg元素中没有维度（问题出在这里）

删除这些行：

svg.setAttribute('width','400');
svg.setAttribute('height','400');

演示

相关文章：