在 google 地图上添加自定义 svg 层 (api v3)

Question

问题来了，

我尝试在 google 地图上添加自定义图层 (svg)。我选择的层非常简单，它只是一个 "rect" 但迟早这些会变得更加复杂，路径等等...但这实际上不是问题。

我终于可以在地图上添加 svg 并使其可见，但是，由于 svg 不像图像标签，我无法找到 scale/size 带有 google 地图的 svg 的方法，就像简单图像一样...

这是一个 google 示例，当您缩放（鼠标滚轮）地图时，自定义叠加层尺寸也会发生变化：

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

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

svg 图层应包含在定义的 div 中（有边界...）。 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>

这里是 fiddle :

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

感谢帮助！

Answer 1

如果你想让你的 svg 图片正确缩放，你需要

a viewBox（你说了，这部分没问题）
svg 元素中没有尺寸（这就是问题所在）。

删除那些行：

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

Demonstration

在 google 地图上添加自定义 svg 层 (api v3)

add custom svg layer on google map (api v3)

javascript

css

svg

google-maps

google-maps-api-3