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

我找到了解决问题的方法。它可能有点 hacky，但它解决了标记的定位问题：我正在使用 Popup 填充字体很棒的地图标记图标并删除它的 "tooltip styled" 边框：

Javascript:

map.on('load', function() {
    var container = document.createElement('div');
    var icon = document.createElement('i');
    icon.dataset.city = city;

    icon.addEventListener('click', function(e) {
        var city = e.target.dataset.city;
        var country = e.target.dataset.country
        flyTo(datacenters[country][city].coordinates);
    });

    icon.classList.add('fa', 'fa-map-marker', 'fa-2x');
    container.appendChild(icon);

    var popup = new mapboxgl.Popup({
            closeButton: false,
            closeOnClick: false
        })
        .setLngLat([
            datacenters[country][city].coordinates.lng,
            datacenters[country][city].coordinates.lat
        ])
        .setDOMContent(container)
        .addTo(map);
});

CSS:

.map div.mapboxgl-popup-content {
    background: none;
    padding: 0;
}

.map .mapboxgl-popup-tip {
    display: none;
}

我只希望有人想出一个真正的解决方案，因为这对我来说有点脏。但是，嘿：它做得很好！

Answer 2

从 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 3

mapbox-gl.js v1.0.0 的新解决方案 - 标记对象现在有一个 anchor 选项来设置与标记的 Lat/Lng 对齐的位置：https://docs.mapbox.com/mapbox-gl-js/api/#marker

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

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

Answer 4

Mapbox 标记现在有一个元素选项，请参阅此 link Mapbox Marker。因此，无需将图标 HTML 附加到 Div 元素，您可以在创建标记时简单地添加到选项中。我发现这也摆脱了偏移问题。所以使用上面的代码你可以做到这一点....

var icon = document.createElement('i');
icon.classList.add('fas', 'fa-map-marker-alt');
icon.style.color = 'blue';
new mapboxgl.Marker(container, {anchor: 'center', offset: [0, 0], element: icon})

还可以更新标记的 CSS 以允许使用指针

.mapboxgl-marker {
    border: none;
    cursor: pointer;
}

MapBox GL JS 标记偏移

MapBox GL JS marker offset

javascript

mapbox

mapbox-gl

mapbox-gl-js