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');

這應該涵蓋大多數情況，並且根據我的經驗比像素偏移更可靠。

Answer 3

我找到了解決我的問題的方法。 它可能有點hacky，但它解決了標記的定位問題：我正在使用彈出窗口填充字體很棒的地圖標記圖標並刪除它的“工具提示樣式”邊框：

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 4

Mapbox Marker 現在有一個元素選項，請參閱此鏈接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;
}