在谷歌地图上添加自定义的SVG层（API V3）

Question

这里有个问题，

我想在谷歌地图上添加一个自定义层（svg）。 我选择的层非常简单，只是一个“rect”，但迟早会变得更加复杂，包括路径等等...但这实际上不是问题。

最终我成功地将svg添加到地图上并使其可见， 但是，由于svg不像图像标签那样，我无法找到一种方法来根据谷歌地图缩放/调整svg的大小，就像简单的图像一样...

这是一个谷歌示例，当您缩放（鼠标滚轮）地图时，自定义覆盖的大小也会随之改变：

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

而且，这是我尝试添加到地图上的svg，您将注意到div（容器）位于特定点（纬度/经度），并且可以通过地图的鼠标滚轮正确缩放。 但是，我尝试添加到其中的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>

这里是代码片段：

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

谢谢您的帮助！

- Julo0sS

Answer 1

如果您希望您的 SVG 图像被正确缩放，您需要具备以下条件：

• 一个含有 viewBox 属性（已经具备，这一点没问题）
• SVG 元素中不应该包含任何尺寸（这里出现了问题）。

请删除以下内容：

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

演示

- Denys Séguret