谷歌地图标记偏移

Question

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

下面是我所说的截图： 你可以看到“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来设置圆心。

- Xtian

Answer 1

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

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

- Nick Andriopoulos

Answer 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",
};

- ruralcoder