传单如何根据多点设置视图

Question

setView() 函数接受一个中心坐标和 。我从 Google Place API 获取了一堆点，我想设置视图以将这些点包含在视图中。

我已经计算了一个合适的边界框（int lat 和 lng），但不知道如何设置与 lat 和 lng 对齐的视图，因为 setView() 只接受中心坐标和缩放，缩放似乎以像素为单位

Answer 1

使用map.fitBounds()：

设置一个地图视图，其中包含具有最大缩放级别的给定地理边界。

此外，您可以使用功能组自动计算 POI 的适当边界框，然后group.getBounds()：

返回要素组的 LatLngBounds（根据其子项的边界和坐标创建）。

var map = L.map("map").setView([48.85, 2.35], 10);

var markers = [
  L.marker([48.84, 2.34]),
  L.marker([48.85, 2.35]),
  L.marker([48.86, 2.36])
];

var group = L.featureGroup(markers).addTo(map);

setTimeout(function () {
  map.fitBounds(group.getBounds());
}, 1000);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet-src.js"></script>

<div id="map" style="height: 200px;"></div>