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，但是这个特定的问题困扰着我，我很想知道如何解决它。当这个问题被解决后，我的实现将比我之前使用的原始地图软件更加优秀。

- Dani

---

有趣的是，@egidius，你是否计划对这些标记进行聚类？如果你已经做过了，能否告诉我如何操作？ - Huw Davies

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

- AndrewHarvey

---

太酷了！我一直在使用v0.21.0版本，所以我猜我的hack在我的情况下仍然有效。非常感谢你。我只需要等待v0.22.0版本发布即可。 - Dani

@Egidius 现在已经发布了 https://github.com/mapbox/mapbox-gl-js/blob/master/CHANGELOG.md - AndrewHarvey

太棒了！！从未等待过这么短的时间来发布。 - Dani

终于搞定了...原来我的宽度需要是负宽度/2，而高度需要是高度*2... - Huw Davies

在当前版本中，偏移量是相对于标记的_中心_而非左上角的：https://docs.mapbox.com/mapbox-gl-js/api/#pointlike - Ben Hull

Answer 2

针对 mapbox-gl.js v1.0.0 的新解决方案 - 现在标记对象具有一个 anchor 选项，可设置位置以对齐标记的纬度/经度: https://docs.mapbox.com/mapbox-gl-js/api/#marker

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

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

- Ben Hull

---

这对我有用，使用类似于提问者的标记，而无需设置“偏移量”。 - Phil Gyford

Answer 3

我已经找到了解决问题的方法。它可能有些hacky，但解决了标记位置的问题：我使用Popup填充一个font awesome地图标记图标并删除其“工具提示样式”的边框：

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;
}

我希望有人能提出真正的解决方案，因为这让我感到有些不舒服。但是嘿，它确实很好地完成了工作！

- Dani

Answer 4

地图盒子的标记现在有一个可选元素选项，请参见此链接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;
}

- michael