google-maps - 使用 svg 标记时缩放期间的 Google map 标记对齐问题

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 的 anchor 需要位于 Canvas 的 (0,0) 处。

看这张图片(我正在使用 illustrator，但任何其他 svg 编辑应用程序都应该这样做):


在这里更新 fiddle : http://jsfiddle.net/tf83z/

Answer 1

您必须定义 SVG 标记的 anchor 。

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

anchor :根据 map 上标记的位置 anchor 定图像的位置。默认情况下， anchor 位于图像底部的中心点。

找到正确的点可能很棘手，但在使用对称符号时以及如果您想将其 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

我添加了默认标记以供引用。