Leaflet弹窗添加“缩放至要素”按钮的实现问题

我来帮你搞定这个缩放按钮的问题，你的代码核心问题是按钮点击事件里的e不是Leaflet的要素位置事件，而是按钮本身的DOM点击事件，所以e.latlng根本拿不到值。咱们来一步步修正：

问题分析 #

原代码里的onclick='getLoc(e)'，这里的e是按钮被点击时的DOM事件对象，不是你需要的要素经纬度信息。而且getLoc函数里想用e.latlng自然会失效。

修正方案 #

我们可以利用JavaScript闭包的特性，在onEachFeature函数里直接为按钮绑定点击事件，这样就能直接访问当前要素的经纬度了。同时可以给缩放操作加上你想要的缩放级别（比如设置缩放级别为15，你可以自己调整）。

修正后的完整代码如下：

// 定义缩放至要素的函数，接收经纬度参数
function zoomToLocation(latlng) {
  // setView第二个参数是缩放级别，可根据需求调整
  map.setView(latlng, 15);
}

// Load Mile Castles
$.ajax({
  url:'load_milecastles.php', 
  success: function(response){ 
    jsnParks = JSON.parse(response); 
    lyrParks = L.geoJSON(jsnParks, { 
      pointToLayer: function(feature, latlng){
        return L.marker(latlng, {icon: redMarker});
      }, 
      onEachFeature: function (feature, layer) { 
        // 这里用闭包直接获取当前layer的latlng
        layer.bindPopup(`
          <center>
            <h4><b>${feature.properties.full_name}</b></h4>
          </center>
          <button onclick="zoomToLocation(${JSON.stringify(layer.getLatLng())})">Zoom</button>
        `); 
      } 
    }).addTo(map);
  }
});

更优雅的写法（避免内联onclick） #

如果不想用内联的onclick，可以通过DOM方式绑定事件，这样代码更易维护：

// Load Mile Castles
$.ajax({
  url:'load_milecastles.php', 
  success: function(response){ 
    jsnParks = JSON.parse(response); 
    lyrParks = L.geoJSON(jsnParks, { 
      pointToLayer: function(feature, latlng){
        return L.marker(latlng, {icon: redMarker});
      }, 
      onEachFeature: function (feature, layer) { 
        // 创建弹窗内容的DOM元素
        const popupContent = document.createElement('div');
        popupContent.innerHTML = `<center><h4><b>${feature.properties.full_name}</b></h4></center>`;
        
        const zoomBtn = document.createElement('button');
        zoomBtn.textContent = 'Zoom';
        // 直接绑定点击事件，利用闭包访问layer的latlng
        zoomBtn.addEventListener('click', function() {
          map.setView(layer.getLatLng(), 15);
        });
        
        popupContent.appendChild(zoomBtn);
        layer.bindPopup(popupContent); 
      } 
    }).addTo(map);
  }
});

关键点说明 #

• 用layer.getLatLng()可以直接获取当前标记的经纬度，不需要依赖事件对象。
• 给map.setView加上第二个参数（缩放级别），能让缩放效果更符合预期，你可以根据自己的地图需求调整这个数值。
• 第二种写法通过DOM方式绑定事件，避免了内联JS的耦合问题，代码更健壮。

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