缩放以适合 leaflet.js 个标记

Question

我正在将我的网站从 google 地图转换为 leaflet/openstreetmap。在网站上，搜索结果显示为地图上的标记。结果可以有一个标记，或 10 个，或 200 个。这一切都很好。但是当结果有多个标记时，我很难将其全部 zoom/fit 。相反，它只是放大了一个（可能是因为我将 map.setView 放大到 18！）。

就我而言，是否有使用 map.setView 的替代方法？我不想在所有情况下都将缩放设置为 18；但希望缩放只是适合内容。我知道关于 SO 有一些类似的问题，但它们无济于事，因为我不知道如何用 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

Leaflet 也有一个 LatLngBounds class, with an extend method, and the map has a 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);
}

缩放以适合 leaflet.js 个标记

Zoom to fit leaflet.js markers

leaflet

openstreetmap

fitbounds