MapBox GL JS標記偏移

我使用MapBox GL JS創建一個自定義標記的地圖：MapBox GL JS標記偏移

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

但是，我似乎有某種偏移問題與標記。問題是：當縮小了一點，標記的底部是不是真的指向的確切位置：

當我有點我變焦進一步到達目的地，它的指向確切的地方。

我真的很喜歡MapBox GL，但這個特殊的問題是竊聽我，我很想知道如何解決它。當這個問題得到解決後，我的實現遠遠優於我使用的原始地圖軟件。

來源

2016-08-04 Dani

出於興趣，@egidius，你聚類這些標記的規劃，如果你已經完成了，你能告訴我怎麼做？ –

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

來源

2016-08-11 00:43:57 AndrewHarvey

酷！我使用的是v0.21.0，所以我想我的黑客在我的情況下仍然是合法的。非常感謝。我只需要等待v 0.22.0的發佈。 – Dani

@Egidius現已發佈https://github.com/mapbox/mapbox-gl-js/blob/master/CHANGELOG.md – AndrewHarvey

真棒！從來沒有必要等待這麼短的時間發佈 – Dani

我找到了解決我的問題的方法。這可能是有點哈克，但它解決了標記的定位問題：我使用的是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; 
}

我只是希望有人想出了一個真正的解決方案，因爲這種感覺有點髒了我。但是，嘿：它做得很好！

來源

2016-08-04 13:48:07 Dani

MapBox GL JS標記偏移

回答

相關問題