使用SVG标记时，Google地图在缩放过程中存在标记对齐问题

Question

使用SVG标记时，Google地图在缩放过程中存在标记对齐问题

4

出现了一个问题，使用path定义的svg标记在缩放时无法正确对齐其位置。在谷歌提供的示例中可以看到这一点。

有趣的是，如果我们使用一个内置的svg符号，似乎就不会出现这个问题。

我正在使用此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)。

请参考此图片（我正在使用Illustrator，但任何其他SVG编辑应用程序都可以）： enter image description here

更新后的示例在这里：http://jsfiddle.net/tf83z/

- F21

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- MrUpsidown · Accepted Answer

您需要定义SVG标记的锚点。

请参考文档：https://developers.google.com/maps/documentation/javascript/reference#Icon 锚点：相对于地图上标记位置定位图像的位置。默认情况下，锚点位于图像底部中心点。

如果您希望在路径边缘锚定具有对称符号的标记，则可能会很棘手，但通常可以在路径的值中找到正确的点。

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演示