javascript - MapBox GL JS 标记偏移

Question

我正在使用 MapBox GL JS使用自定义标记创建 map :

var marker = new mapboxgl.Marker(container)
    .setLngLat([
        datacenters[country][city].coordinates.lng,
        datacenters[country][city].coordinates.lat
    ])
    .addTo(map);

但是，我似乎对标记有某种偏移问题。问题是:当缩小一点时，标记的底部并没有真正指向确切的位置:

当我进一步放大时，它到达了目的地并且指向了准确的位置。

我真的很喜欢 MapBox GL，但是这个特殊的问题一直困扰着我，我很想知道如何解决它。当这个问题得到解决后，我的实现比我使用的原始 map 软件要好得多。

Answer 1

从 Mapbox GL JS 0.22.0 开始，您可以为标记设置偏移选项。 https://www.mapbox.com/mapbox-gl-js/api/#Marker

例如，要偏移标记，使其 anchor 位于中间底部(对于您的图钉标记)，您可以使用:

var marker = new mapboxgl.Marker(container, {
        offset: [-width / 2, -height]
    })
    .setLngLat([
        datacenters[country][city].coordinates.lng,
        datacenters[country][city].coordinates.lat
    ])
    .addTo(map);