缩放以适合leaflet.js标记

Question

我正在将我的网站从Google地图转换为单张/ openstreetmap。在网站上，搜索结果在地图上显示为标记。结果可以有一个标记，或10或200.这一切都很好，很好。但是当结果有多个标记时，我无法将它缩放/放大。相反，它只是放大一个（可能是因为我把map.setView放大到18！）。

在我的情况下，是否有替代使用map.setView？我不想在所有情况下将缩放比例设置为18。但希望缩放只适合内容。我知道这里有一些类似的问题，但是他们没有帮助，因为我不知道如何用map.setView替换不能对变焦进行硬编码的东西。这是我的全部功能：

function showLocations(ids, lats, lons, contents) { 
    locationIDs = ids; 
    infoWindows = new Array(); 
    markers = new Array(); 

    map = new L.Map('map_canvas'); 
    var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'; 
    var osmAttrib='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'; 
    var osm = new L.TileLayer(osmUrl, {minZoom: 1, maxZoom: 19, attribution: osmAttrib}); 

    for (i in ids) { 

    var infoWindow = L.popup() 
    .setContent(contents[i]); 

    map.setView(new L.LatLng(lats[i], lons[i]),18); 
    map.addLayer(osm); 
    L.marker([lats[i], lons[i]]).addTo(map) 
    .bindPopup(infoWindow) 
    .openPopup(); 

    } 
} 

与谷歌地图，我用这个：

markers.push(marker); 
bounds.extend(latlng); 

if (contents.length === 1) { 
    map.setZoom(18); 
    map.setCenter(new google.maps.LatLng(lats[0], lons[0])); 
} else { 
    map.fitBounds(bounds); 
} 

谢谢！

Answer 1

单张也有LatLngBounds类，有extend方法，并且地图有一个fitBounds方法，因此您可以将Google地图代码移植到1：1。

还有几点：循环内不需要调用map.addLayer(osm)，调用它就足够了;将var添加到所有变量是一种很好的做法;和for (i in ids)是迭代数组的一种危险方法，更好地调用ids.forEach。

function showLocations(ids, lats, lons, contents) { 
    var infoWindows = new Array(); 
    var markers = new Array(); 

    var map = new L.Map('map_canvas'); 
    var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'; 
    var osmAttrib='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'; 
    var osm = new L.TileLayer(osmUrl, {minZoom: 1, maxZoom: 19, attribution: osmAttrib}); 
    map.addLayer(osm); 

    var bounds = new L.LatLngBounds(); 

    ids.forEach(function(i) { 
    var infoWindow = L.popup().setContent(contents[i]); 

    var marker = L.marker([lats[i], lons[i]]) 
     .addTo(map) 
     .bindPopup(infoWindow) 
     .openPopup(); 

    bounds.extend(marker.getLatLng()); 
    }); 

    map.fitBounds(bounds); 
}