Question

这是问题，

我尝试在Google地图上添加自定义图层（svg）。我选择的层非常简单，它只是一个“矩形”，但迟早这些路径和路径会更加复杂。等......但实际上这不是问题。

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

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

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

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

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/

感谢您的帮助！

Answer 1

如果您希望正确缩放svg图像，则需要

a viewBox（你已经说过了，这部分还可以）
svg元素中没有维度（这是问题所在）。

删除这些行：

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

Demonstration

在谷歌地图上添加自定义svg图层（api v3）

1 个答案: