MapBox GL JSマーカーは、私は、カスタムマーカーでマップを作成するために、<a href="https://www.mapbox.com/mapbox-gl-js/api/#Marker" rel="nofollow noreferrer">MapBox GL JS</a>を使用してい

Question

を相殺しました。事は次のとおりです。少しズームアウトしたときに、マーカーの底は本当に正確な場所を指していない：私はビットにズームしていた場合

さらにそれがその目的地に到着し、それが指しています正確な場所。

私は本当に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

私は私の問題の解決策を見つけました。それは多少ハックかもしれないが、それは、マーカーの位置の問題を解決：私は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; 
} 

これは私にはちょっと汚い感じているので、私はちょうど、誰かが真の解決策を思い付く願っています。しかし、ちょっと：それはちょうどいい仕事です！