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

Question

这是问题所在,

我尝试在谷歌地图上添加自定义图层(svg).我选择的图层非常简单,它只是一个"矩形",但迟早这些路径会变得复杂得多......但实际上这不是问题.

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

这是一个谷歌示例,当您缩放(鼠标滚动)地图时,自定义叠加层大小也会发生变化:

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>

这是小提琴:

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

感谢帮助!

Answer 1

如果你想要正确缩放你的svg图像,你需要

• a viewBox(你已经说过了,这部分还可以)
• svg元素中没有维度(这是问题所在).

删除这些行:

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

示范