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

我找到了解决问题的方法。它可能有点hacky，但它解决了标记的定位问题：我使用Popup填充字体真棒地图标记图标并删除它＆＃34;工具提示样式＆＃34;边界：

使用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 3

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

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

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

Answer 4

Mapbox标记现在具有元素选项，请参见此链接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标记偏移量

4 个答案: