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

时间:2013-11-14 18:36:52

标签: javascript leaflet mapbox

我目前有一些代码,功能与我想要的一样。我删除了与mapbox map加载的JSON,从本地文件加载一个JSON集并过滤掉一些点。能够通过之前的帖子弄清楚这一点。

现在,我想要自动平移/缩放地图,只包含可见且没有运气的标记。我尝试了几种变体的fitBounds和map.extent,并用map.markerLayer.getGeoJSON或markerLayer.getGeoJSON来提供它。前者抛出一个控制台错误“lat”undefined,它发送给我一个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:我刚试过这个,证明了我的理论,即在首先设置loadURL时getGeoJSON确实不起作用。它有点工作,但显然没有达到我想要的目的。

$.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,因为它不会让我在几个小时内回答我的问题:

答案是:你必须等待准备好的事件,至少在我的情况下。将编辑#2中的内容移动到markerLayer.on ready事件中。

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

1 个答案:

答案 0 :(得分:1)

答案是:你必须等待准备好的事件,至少在我的情况下。将编辑#2中的内容移动到markerLayer.on ready事件中。

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