使用svg标记时，缩放期间的Google Maps标记对齐问题

Question

出于某种原因，当使用路径定义的svg标记进行放大和缩小时，标记未正确对齐其位置。这在one of google's examples中很明显。

有趣的是，如果我们使用其中一个built in svg symbols，这似乎不是问题。

我使用这个svg路径作为我的标记，它也遇到了对齐问题：

M 256,480c-84.828,0-153.6-68.157-153.6-152.228c0-84.081, 153.6-359.782, 153.6-359.782s 153.6,275.702, 153.6,359.782C 409.6,411.843, 340.828,480, 256,480z M 255.498,282.245c-26.184,0-47.401,21.043-47.401,46.981c0,25.958, 21.217,46.991, 47.401,46.991c 26.204,0, 47.421-21.033, 47.421-46.991 C 302.92,303.288, 281.702,282.245, 255.498,282.245z

这个问题的原因是什么？

---

编辑：感谢MrUpsidown解决问题。 SVG需要将其锚点放在画布的（0,0）处。

看到这张图片（我正在使用插画家，但任何其他svg编辑应用程序都应该这样做）：

此处更新了小提琴：http://jsfiddle.net/tf83z/

Answer 1

您必须定义SVG标记的锚点。

请参阅文档：https://developers.google.com/maps/documentation/javascript/reference#Icon

anchor：锚定图像的位置，对应于地图上标记的位置。默认情况下，锚点位于图像底部的中心点。

找到正确的点可能会很棘手，但是当使用对称符号并且想要将其锚定在路径边缘时，它通常是您路径的值之一。

var icon = {

    path: "M 256,480c-84.828,0-153.6-68.157-153.6-152.228c0-84.081, 153.6-359.782, 153.6-359.782s 153.6,275.702, 153.6,359.782C 409.6,411.843, 340.828,480, 256,480z M 255.498,282.245c-26.184,0-47.401,21.043-47.401,46.981c0,25.958, 21.217,46.991, 47.401,46.991c 26.204,0, 47.421-21.033, 47.421-46.991 C 302.92,303.288, 281.702,282.245, 255.498,282.245z",
    fillColor: '#FFFF00',
    fillOpacity: .6,
    anchor: new google.maps.Point(255.498,-26.204),
    strokeWeight: 0,
    scale: .25,
    rotation: 180
}

JSFiddle demo

我添加了默认标记以供参考。