Question

基本设置是：

实例化以lat / lng / zoom
使用多个标记创建要素图层并添加到地图
调用map.fitBounds（）调整缩放级别以包含所述标记

结果：标记渲染但底层地图图块没有。

SO上的人们已经报告了以前版本的mapbox.js这个问题（我使用的是v2.1.6）。以前的解决方案是：

最初实例化地图对象时，不在地图上调用setView（）
在调用fitBounds（）

然而，这些解决方案都没有帮助，我很好奇是否有其他人面临类似的问题。我创建了一个jsfiddle来演示我遇到的问题：https://jsfiddle.net/Lgfazueq/

L.mapbox.accessToken = 

'pk.eyJ1IjoiZHJpemx5IiwiYSI6IkhMLXBmVGcifQ.CFEPrONMLQQJdiJ2NV9Qsg';
var map = L.mapbox.map('map', 'examples.map-i86nkdio').setView([40.7377, -73.9801], 12);
//var map = L.mapbox.map('map', 'examples.map-i86nkdio'); 

geoJSON = {
    type: 'FeatureCollection',
    features: [
        {
            type: 'Feature',
            geometry: {
                type: 'Point',
                coordinates: [40.73771, -73.9801]
            },
            properties: {}
        },
        {
            type: 'Feature',
            geometry: {
                type: 'Point',
                coordinates: [40.72661, -73.9897]
            },
            properties: {}
        }
    ]
};


var featureLayer = L.mapbox.featureLayer(geoJSON).addTo(map);
map.fitBounds(featureLayer.getBounds());

希望解决方案是我忽略的一点点。

Answer 1

错误是我自己的。 GeoJSON坐标都是格式化[x，y] / [lon，lat]而不是像我一样的[lat，lon]。这是小事。

L.mapbox.accessToken = 'pk.eyJ1IjoiZHJpemx5IiwiYSI6IkhMLXBmVGcifQ.CFEPrONMLQQJdiJ2NV9Qsg';
var map = L.mapbox.map('map', 'examples.map-i86nkdio').setView([40.7377, -73.9801], 12);
//var map = L.mapbox.map('map', 'examples.map-i86nkdio'); 

geoJSON = {
    type: 'FeatureCollection',
    features: [
        {
            type: 'Feature',
            geometry: {
                type: 'Point',
                coordinates: [-73.9801, 40.73771]
            },
            properties: {}
        },
        {
            type: 'Feature',
            geometry: {
                type: 'Point',
                coordinates: [-73.9897, 40.72661]
            },
            properties: {}
        }
    ]
};


var featureLayer = L.mapbox.featureLayer(geoJSON).addTo(map);
map.fitBounds(featureLayer.getBounds());

MapBox：使用多个标记调用fitBounds（）不会渲染切片

1 个答案: