縮放以適合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); 
}