Масштабировать метку leaflet.js

Question

Я конвертирую свой сайт с карт google в листовку/openstreetmap. На сайте результаты поиска отображаются как маркеры на карте. Результаты могут иметь один маркер, или 10, или 200. Это все отлично и отлично. Но когда результаты имеют несколько маркеров, у меня возникают проблемы с его увеличением/соответствием всем им. Вместо этого он просто увеличивает масштаб одного (возможно, потому, что у меня есть масштаб в map.setView до 18!).

В моем случае есть ли альтернатива использованию map.setView? Во всех случаях я не хочу установить масштаб до 18; но хотелось бы, чтобы зум просто соответствовал содержимому. Я знаю, что есть такие же вопросы о SO, но они не помогают, поскольку я не знаю, как заменить withe 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(); 

    } 
} 

С картами Google, я использую это:

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