弹出窗口中的传单缩放按钮

Question

我正在尝试在传单弹出窗口中添加一个 'zoom to' 按钮，单击该按钮将平移和缩放到地图项。我无法弄清楚如何使用下面的代码执行此操作（我知道我正在修改代码）：

function getLoc(e){
    map.setView(e.latlng);
    }
        
        // 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.bindPopup(
                       "<center><h4><b>"+feature.properties.full_name+"</b></h4></center>" +
                       "<button onclick= 'getLoc(e)'>Zoom</button>");
                      }
                 }).addTo(map);

Answer 1

将您的代码替换为：

function getLoc(latlng){
    map.setView(JSON.parse(latlng));
}

var latlngStr = JSON.stringify([layer.getLatLng().lat,layer.getLatLng().lng]);
layer.bindPopup("<center><h4><b>"+feature.properties.full_name+"</b></h4></center>" +
                       "<button onclick= 'getLoc(\""+latlngStr+"\")'>Zoom</button>");

e应该是一个变量但是读不出来因为是字符串onclick='getLoc(e)'
e 从未定义你应该将你的 latlng 添加到函数而不是事件
现在 latlng 被转换为数组，然后作为字符串添加到函数中。调用该函数时，它将其转换回数组，然后将视图移动到 latlng

Answer 2

用这个方法，对我有用

var coord;

function getLoc(){
map.setView(coord,13);
}
lyrParks = L.geoJSON(jsnParks, 
                                { pointToLayer: function(feature,latlng){return 
L.marker(latlng,{icon: redMarker});}, 
                                  onEachFeature: function (feature, layer) {
                                layer.bindPopup(
                       "<center><h4><b>"+feature.properties.full_name+"</b></h4></center>" +
                       "<button onclick= 'getLoc()'>Zoom</button>");

                                 layer.on('click', function(e){
                        coord =[e.latlng.lat, e.latlng.lng];
                           }

                         }
                 }).addTo(map);

Zoom button in Popup with leaflet

弹出窗口中的传单缩放按钮

Leaflet Zoom Button in Popup

javascript

zooming

leaflet