单击 -Leaflet 缩放至标记位置

Question

我在地图上显示来自 geojson 文件的标记。在当前代码中，当我将鼠标悬停在标记上时，我可以在弹出窗口中看到属性。我想在单击 marker.how 时添加飞行或放大标记的确切位置，我可以实现吗？

 cityMarker = new L.geoJson(city, {
        onEachFeature: function(feature, layer) {
            //if (feature.properties && feature.properties.name) {
            if ( feature.properties.name) {   
                layer.bindPopup(feature.properties.name, {closeButton: false, offset: L.point(0, -2)});
                layer.on('mouseover', function() { layer.openPopup(); });
                layer.on('mouseout', function() { layer.closePopup(); });
            }
        },
        pointToLayer: function (feature, latlng) {
            var cityIcon = new L.Icon({
            iconSize: [20, 20],
            iconAnchor: [13, 27],
            popupAnchor: [1, -20],
            iconUrl: './css/img/marker-icon-red.png'
        });
            //return L.circleMarker(latlng);
            return L.marker(latlng,{icon: cityIcon});
        }
    });
  
    map.addLayer(cityMarker);

Answer 1

我已经想出解决方案了，所以我在这里添加它。

 cityMarker.on('click', function(e) {
      map.setView(e.latlng, 16);      
});

Answer 2

要获得漂亮流畅的动画 pan/zoom 效果而不是跳跃，请使用 flyTo

cityMarker.on('click', function(e) {
      map.flyTo(e.latlng, 16);      
});

单击 -Leaflet 缩放至标记位置

Zoom to Marker location on click -Leaflet

html

javascript

zooming

marker

leaflet