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

Я нашел решение моей проблемы. Это может быть несколько Hacky, но это решает проблему позиционирования маркера: Я использую Popup заполнить его шрифта удивительном значок на карте маркером и удалите это «всплывающая подсказка в стиле» границы:

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

Я просто надеюсь, что кто-то приходит с реальным решением, потому что это чувствует своего рода грязный ко мне. Но эй: это прекрасно работает!