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

【问题标题】：add custom svg layer on google map (api v3)在谷歌地图上添加自定义 svg 层（api v3）
【发布时间】：2015-04-19 15:09:20
【问题描述】：

问题来了，

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

我终于可以在地图上添加 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/

感谢您的帮助！

【问题讨论】：

标签： javascript css google-maps google-maps-api-3 svg

【解决方案1】：

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

一个viewBox（你已经放过了，这部分没问题）
svg 元素中没有维度（问题出在这里）。

删除这些行：

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

Demonstration

【讨论】：