leaflet如何根据多点设置View

Question

setView() 函数接受中心坐标和 。我已经从 Google place API 获取了一堆点，并且我想设置 View 以将这些点包含在 View 中。

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

Answer 1

使用map.fitBounds() :

Sets a map view that contains the given geographical bounds with the maximum zoom level possible.

此外，您可以使用 Feature Group 自动计算 POI 的适当边界框。然后group.getBounds() :

Returns the LatLngBounds of the Feature Group (created from bounds and coordinates of its children).

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>