MapBox GL JS Marker Offset

Question

Ich verwende MapBox GL JS eine Karte mit einem benutzerdefinierten Marker zu erstellen:

var marker = new mapboxgl.Marker(container) 
    .setLngLat([ 
     datacenters[country][city].coordinates.lng, 
     datacenters[country][city].coordinates.lat 
    ]) 
    .addTo(map); 

aber ich scheine eine Art von Offset-Problem mit dem Marker zu haben. Die Sache ist: Wenn etwas vergrößert wird, wird der Boden des Markers nicht wirklich auf den genauen Standort zeigen:

Wenn ich in ein bisschen bin Zoomen weiter es sein Ziel erreicht und es zeigt auf der genaue Ort.

Ich liebe wirklich MapBox GL, aber dieses Problem mich nervt und ich würde gerne wissen, wie es zu lösen. Wenn dies behoben ist, ist meine Implementierung der ursprünglichen Kartensoftware, die ich verwendet habe, weit überlegen.

Answer 1

Von Mapbox GL JS 0.22.0 können Sie eine Offset-Option für den Marker festlegen. https://www.mapbox.com/mapbox-gl-js/api/#Marker

Zum Beispiel die Markierung versetzt, so dass es Anker ist, ist der mittlere Boden (für Pin-Marker) Sie verwenden würden:

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

Ich habe eine Lösung für mein Problem gefunden. Es könnte etwas hacky, aber es löst das Positionierungsproblem des Markers: Ich bin ein Popup füllen Sie es mit einer Schriftart ehrfürchtige Markierung auf der Karte Symbol und entfernen Sie es Grenzen „gestylt Tooltip“:

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

ich jemand nur hoffen, mit einer echten Lösung kommt, weil das für mich irgendwie schmutzig anfühlt. Aber hey: Es macht die Arbeit gut!