适应 leaflet.js 标记的缩放

Question

适应 leaflet.js 标记的缩放

5

我正在将我的网站从Google地图转换为Leaflet/OpenStreetMap。在该网站上，搜索结果会显示为地图上的标记。结果可能只有一个标记，也可能有10个或200个。这都很好。但是当结果具有多个标记时，我无法让它缩放/适应所有标记。相反，它只会缩放到一个标记（可能是因为我在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();

  }
}

使用谷歌地图，我使用以下代码：

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

谢谢！

- Ganberry

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alex Morega · Accepted Answer

Leaflet同样有一个LatLngBounds类，带有一个extend方法，地图也有一个fitBounds方法，因此您可以将Google Maps代码一对一地移植过来。

还有几点需要注意：在循环内部没有必要调用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);
}