Leaflet点击Marker缩放报错：Uncaught TypeError: e.target.getBounds is not a function

这个问题我之前也碰到过，很容易搞混不同图层的方法！咱们一步步来解决：

错误原因 #

你看到的Uncaught TypeError: e.target.getBounds is not a function，是因为点击的目标是Marker（点要素），而Leaflet里的Marker对象并没有getBounds()方法——这个方法是给多边形、折线这类有地理范围的图层设计的。你的console.log(e.target)能输出，说明事件绑定是正常的，只是调用了错误的方法。

两种可行的解决方案 #

方案1：直接定位到Marker坐标（推荐）

用map.setView()方法，直接传入Marker的经纬度和你想要的缩放级别，简单直接：

function zoomToFeature(e) {
  // 获取Marker的经纬度
  const markerLatLng = e.target.getLatLng();
  // 第二个参数是缩放级别，可根据需求调整（比如12-18之间）
  map.setView(markerLatLng, 15);
}

方案2：手动创建Bounds适配fitBounds

如果你一定要用fitBounds，可以基于Marker的坐标手动生成一个最小的Bounds，再添加缓冲范围：

function zoomToFeature(e) {
  const latlng = e.target.getLatLng();
  // 创建一个包含该点的Bounds，pad()参数是扩展比例（0.1=四周扩展10%）
  const bounds = L.latLngBounds(latlng, latlng).pad(0.1);
  map.fitBounds(bounds);
}

可选优化：简化事件传参 #

你还可以简化事件绑定的逻辑，直接把layer（也就是当前Marker）传给zoomToFeature，不用通过事件对象e：

function onEachFeature(feature, layer){
  layer.on('click', function(){
    $('.orange').html(feature.properties.nome);
    $('.city').html(feature.properties.imagem);
    $('.event').html(feature.properties.descricao);
    zoomToFeature(layer); // 直接传layer，更直观
  });
}

function zoomToFeature(layer) {
  map.setView(layer.getLatLng(), 15);
}

这样修改后，点击Marker就能正常缩放定位啦！

内容的提问来源于stack exchange，提问作者Elton Santos