最低点以设置为锚点

【问题标题】：Google Maps API / JavaScript: How to find out base point / lowest point of custom marker to set as anchor pointGoogle Maps API / JavaScript：如何找出自定义标记的基点/最低点以设置为锚点
【发布时间】：2020-12-31 00:50:52
【问题描述】：

我使用以下函数为 Google 地图 API 创建（基本）自定义标记。一切正常，只是标记在缩放时会稍微改变位置。
我假设这是由默认锚点引起的。

如何找出我的特定标记的基点（最低点），以便我可以将其设置为我的锚点？

function createMarker(fillColor) {
    return {
        path: 'M 0, 0 C -2, -20 -10, -22 -10, -30 A 10, 10 0 1, 1 10, -30 C 10, -22 2, -20 0, 0 z',
        fillColor: fillColor,
        fillOpacity: 1,
        labelOrigin: { x: 0, y: -29 },
        scale: 1.2,
        strokeColor: '#fff',
        strokeWeight: 1
    };
}

【问题讨论】：

为什么您认为您的标记的锚点不正确（默认为 (0,0)）？它看起来对我来说是正确的（尽管标记有一个非常“尖锐”的点）。 fiddle，红色的“麻疹”标记在指定坐标处。

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

【解决方案1】：

对于 SVG 图标，默认情况下，符号锚定在 (0, 0)。位置在与符号路径相同的坐标系中表示。"

anchor
类型：点可选
符号相对于标记或折线的位置。的坐标符号的路径由锚点的 x 和 y 坐标向左和向上平移分别。默认情况下，符号锚定在 (0, 0)。位置表示为与符号路径相同的坐标系。

对于你的路径：'M 0, 0 C -2, -20 -10, -22 -10, -30 A 10, 10 0 1, 1 10, -30 C 10, -22 2, -20 0, 0 z'，这对我来说是正确的。

要更改它，请如上所述设置anchor 属性。

anchor: new google.maps.Point(0,-30)

会将“气泡”的中心放在坐标上。

fiddle

默认为(0,0):

fiddle

【讨论】：