谷歌地图标记偏离中心答案

【问题标题】：Google Maps Marker off center谷歌地图标记偏离中心
【发布时间】：2013-02-21 14:43:24
【问题描述】：

我有一个谷歌地图，在特定的纬度和经度上有一个圆圈。我还使用了一个我想显示在圆圈中心的标记，它应该是圆圈设置的 Lat 和 Lng。

这是我正在谈论的屏幕截图：

您可以看到“6”和“7”不在圆的中心。我不知道如何解决这个问题？

这是标记代码：

var markerIcon = [
                "img/marker-icon-1.png",
                "img/marker-icon-2.png",
                "img/marker-icon-3.png",
                "img/marker-icon-4.png",
                "img/marker-icon-5.png",
                "img/marker-icon-6.png",
                "img/marker-icon-7.png",
                "img/marker-icon-8.png",
                "img/marker-icon-9.png",
                "img/marker-icon-10.png"
            ];


var marker = new google.maps.Marker({
    position:new google.maps.LatLng(mapDataTrending[i].lat, mapDataTrending[i].lng),
    icon: markerIcon[i],
    map: map
});

我正在从 JSON 文件设置 Lat 和 Lng，但我使用相同的 Lat 和 Lng 来设置我的圆圈的中心。

【问题讨论】：

标签： google-maps marker

【解决方案1】：

请注意，当您将图像作为标记放置时，图像的底部中心会转到所选的 latlng。您需要通过 Icon.anchor 属性调整图像大小（假设您正在谈论 google maps Javascript v3，因为您使用的是 icon ）

https://developers.google.com/maps/documentation/javascript/reference#Icon

【讨论】：

【解决方案2】：

希望有人会发现这有助于寻找更多的复制粘贴答案。 ICON_BASE 允许您在多个相同大小的图标之间复制它。

const ICON_BASE = {
    size: new google.maps.Size(16, 16), 
    origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(8, 8)),
};

const ICON_1 = {
    ...ICON_BASE,
    url: "img/marker-icon-1.png",
};

【讨论】：