Leaflet 缩放以适合传单.js标记

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

在我的例子中，是否有使用map.setView的替代方法？我不想在所有情况下都将缩放设置为18；但我希望缩放只适合内容。我知道有一些类似的问题，但它们没有帮助，因为我不知道如何用不硬编码缩放的东西替换e 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();

  }
}

谢谢

传单也有一个类，带有一个

extend

方法，地图有一个方法，因此您可以将谷歌地图代码1:1移植到这个类中

还有几点：不需要在循环中调用

map.addLayer（osm）

，只需调用一次就足够了；将

var

添加到所有变量中是一种很好的做法；而

for（ids中的i）

是迭代数组的危险方式，最好调用

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

功能显示位置（ID、LAT、LON、目录）{
var infoWindows=新数组（）；
var markers=新数组（）；
var map=新的L.map（'map_canvas'）；
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'；
var osmAttrib='Map data©contributors'；
var osm=new L.TileLayer（osmUrl，{minZoom:1，maxZoom:19，attribution:osmAttrib}）；
map.addLayer（osm）；
var bounds=新的L.LatLngBounds（）；
id.forEach（函数（i）{
var infoWindow=L.popup（）.setContent（contents[i]）；
var marker=L.marker（[lats[i]，lons[i]]
.addTo（地图）
.bindPopup（信息窗口）
.openPopup（）；
extend（marker.getLatLng（））；
});
映射边界（bounds）；
}

非常感谢，亚历克斯！我还没有插上电源，但这看起来很棒。谢谢你给我额外的小费。在阅读教程/示例时，我有时会遇到一个问题，即它们并不总是显示完整的功能（考虑到每种情况都不同，这是有道理的），而fitBounds和LatLngBounds之类的东西最终无法很好地处理我的其他东西。虽然我尝试过，但我自己还没有足够的技能来解决所有问题！你知道当我收到传单.js错误时意味着什么吗？例如“TypeError:o.DomUtil.getPosition（…）未定义”或“TypeError:this.\u startPos未定义”或“TypeError:this.\u东北未定义”。我正在使用cdn的传单-0.7.3。请举例说明您的问题，否则无法猜测。当我使用您的例子时，就会发生这种情况。任何时候我使用fitBounds或LatLngBounds。我的猜测是，它无法找出边界的边缘在哪里。可能相关：

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