Mapbox GL JS getBounds 未定义

Question

我一直在尝试使用 Mapbox GL JS 绘制多个标记并在这些标记上设置地图 fitBounds。标记在地图上绘制得很好，我只是在 fitBounds 部分遇到了问题。

我不断收到此控制台错误：

Uncaught TypeError: Cannot read property 'lng' of undefined
lng_lat_bounds.js:154

这是我绘制标记的 JS。

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v10',
    center: [-96.2, 37.8],
    zoom: 9
});

// add markers to map
var bounds = new mapboxgl.LngLatBounds();
for ( var i=0; i < markersArray.length; ++i ){

    markersArray[i].features.forEach(function(marker) {

        // create a HTML element for each feature
        var el = document.createElement('div');
        el.className = 'marker';

        // make a marker for each feature and add it to the map
        new mapboxgl.Marker(el)
            .setLngLat(marker.geometry.coordinates)
            .setPopup(new mapboxgl.Popup({offset: 25}) // add popups
                .setHTML('<h3>' + marker.properties.title + '</h3><p>' + marker.properties.description + '</p>'))
            .addTo(map);
    });
}
map.fitBounds(bounds);

Answer 1

您实际上需要使用 bounds.extend 扩展每个标记 lng,lat 的边界。

Mapbox GL JS getBounds 未定义

Mapbox GL JS getBounds undefined

mapbox

mapbox-gl

mapbox-gl-js