javascript - 通过 .loadURL 加载的 JSON 标记范围内的自动平移/居中/缩放 map

Question

我目前有这段代码，可以按照我想要的方式运行。我清空了使用 Mapbox map 加载的 JSON，从本地文件加载一个 JSON 集并过滤掉一些点。感谢之前的帖子，我能够解决这个问题。

现在，我想自动平移/缩放 map 以仅包含可见但运气不好的标记。我尝试了 fitBounds 和 map.extent 的几种变体，并使用 map.markerLayer.getGeoJSON 或markerLayer.getGeoJSON 为其提供数据。前者抛出“lat”未定义的控制台错误，这让我进行了 console.log 搜索，似乎当您使用 loadURL 时，getGeoJSON 不再返回任何结果？

感谢您的帮助。这是代码。

var statestring = String(Request.QueryString("location"));
var map = L.mapbox.map('map', 'aam.map-ryzdcons');

map.markerLayer.setGeoJSON([]);
var markerLayer = L.mapbox.markerLayer()
.loadURL('markers.geojson.txt')
.setFilter(function(f) {
return f.properties['coverage'].toLowerCase().indexOf(statestring.toLowerCase()) > -1 ; })
.addTo(map);

在这里我尝试放置map.fitBounds(markerLayer.getBounds());没有成功，还有一些其他变化。

  markerLayer.on('mouseover', function(e) {
      e.layer.openPopup();
  });
  markerLayer.on('mouseout', function(e) {
      e.layer.closePopup();
  });

编辑#2:我刚刚尝试过这个，证明了我的理论，即 getGeoJSON 在首先设置 loadURL 时确实不起作用。它有点有效，但显然没有达到我想要的效果。

$.getJSON("markers.geojson.txt", function (data) {
map.markerLayer.setGeoJSON(data);                           
map.fitBounds(markerLayer.getBounds());
if (markers.length == '1') {
map.setZoom(8);
}
map.markerLayer.setGeoJSON([]);
}); 

编辑#3，因为它不会让我在接下来的几个小时内回答我的问题:

答案是:你必须等待ready事件，至少在我的例子中是这样。将编辑#2 中的内容移至markerLayer.on 就绪事件。

var markers = [];   
markerLayer.on('ready', function(e) {
this.eachLayer(function(marker) { markers.push(marker); });
map.fitBounds(markerLayer.getBounds());
if (markers.length == '1') {
    map.setZoom(8);
    }
//alert(markers.length);
}); 

Answer 1

答案是:你必须等待ready事件，至少在我的例子中是这样。将编辑#2 中的内容移至markerLayer.on 就绪事件。

var markers = [];   
markerLayer.on('ready', function(e) {
this.eachLayer(function(marker) { markers.push(marker); });map.fitBounds(markerLayer.getBounds());
if (markers.length == '1') {
map.setZoom(8);
}
//alert(markers.length);
});