Leaflet地图：如何将地图居中并缩放至单个标记点

嗨，我来帮你搞定这个Leaflet地图的问题～你想在只有单个标记点时，让地图自动居中到这个标记并调整缩放级别对吧？我看了你尝试的代码，问题主要出在两个地方：变量名不统一和方法的参数使用错误，下面给你详细说明并给出正确的实现方案：

首先看你代码里的问题：

• 你定义的标记组是markerGroup，但后面却用markers.getLayers().length来获取标记数量，这会导致找不到对应对象的问题，必须统一使用markerGroup；
• map.fitBounds()方法需要传入的是边界范围（Bounds对象），但你传入了markerGroup.getBounds().getCenter()，这个getCenter()返回的是单个坐标点（LatLng对象），类型不匹配，所以方法不会生效。

下面是修正后的完整代码，包含两种可行的实现思路：

方法一：直接设置地图视图（推荐，更直观） #

当只有一个标记时，直接获取标记的坐标，用setView()方法指定地图中心和你想要的缩放级别：

// MARKEERPUNTEN OPHALEN
var markerGroup = L.featureGroup([
  {string.htmldecode($markers, true)}
]).addTo(map);

// MARKEERPUNTEN TONEN IN KAART
// 检查FeatureGroup中的标记数量
function checkMarkerCount() {
  var markerCount = markerGroup.getLayers().length;
  if (markerCount === 1) {
    // 获取单个标记的坐标
    var singleMarker = markerGroup.getLayers()[0];
    // 设置地图中心到标记位置，第二个参数是自定义的缩放级别（比如15，可根据需求调整）
    map.setView(singleMarker.getLatLng(), 15);
  } else if (markerCount > 1) {
    // 如果有多个标记，自动适配所有标记的范围
    map.fitBounds(markerGroup.getBounds());
  }
}

// 初始化时调用，若后续标记有增减，也可在对应事件中调用此函数
checkMarkerCount();

方法二：用fitBounds适配单个标记 #

如果你更习惯用fitBounds，可以给单个标记生成一个极小的边界范围，让地图自动缩放适配：

// MARKEERPUNTEN OPHALEN
var markerGroup = L.featureGroup([
  {string.htmldecode($markers, true)}
]).addTo(map);

// MARKEERPUNTEN TONEN IN KAART
function checkMarkerCount() {
  var markerCount = markerGroup.getLayers().length;
  if (markerCount === 1) {
    var singleMarker = markerGroup.getLayers()[0];
    var latLng = singleMarker.getLatLng();
    // 创建一个包含该标记的极小边界
    var bounds = L.latLngBounds(latLng, latLng);
    // 适配边界，还可以通过setMaxZoom控制最大缩放级别
    map.fitBounds(bounds, { maxZoom: 15 });
  } else if (markerCount > 1) {
    map.fitBounds(markerGroup.getBounds());
  }
}

checkMarkerCount();

这样修改后，当地图上只有一个标记时，就会自动居中到标记位置并设置好缩放级别啦～

备注：内容来源于stack exchange，提问作者user2257654