MapBox GL JS标记偏移量

Question

我正在使用MapBox GL JS来创建带有自定义标记的地图:

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

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

当我进一步放大它到达目的地时,它指向确切的位置.

我真的很喜欢MapBox GL,但这个特殊的问题让我烦恼,我很想知道如何解决它.当这个问题得到解决时,我的实现远比我使用的原始映射软件更优越.

Answer 1

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

例如,要偏移标记,使其锚点位于中间底部(对于您的引脚标记),您将使用:

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

Answer 2

mapbox-gl.js v1.0.0 的新解决方案 - 标记对象现在可以anchor选择将位置设置为与标记的纬度/经度对齐：https ://docs.mapbox.com/mapbox-gl-js/api/#标记

var marker = new mapboxgl.Marker(container, {anchor: 'bottom');

这应该涵盖大多数情况，并且根据我的经验比像素偏移更可靠。