Leaflet地图调用fitBounds无响应，点击缩放功能失效求助

你的代码里有两个核心问题导致fitBounds功能失效：

• map.fitBounds()方法必须传入目标边界参数，你现在调用时没有传任何参数，Leaflet不知道要缩放到哪个范围
• 加载GeoJSON图层时没有保存实例引用，无法获取多边形的边界数据

修改方案： #

1. 先把加载的GeoJSON图层保存到变量中，这样后续能获取它的边界
2. 在点击事件里，调用这个图层的getBounds()方法获取边界，传给map.fitBounds()

修改后的完整代码：

<script type="text/javascript">
    var map = L.map('map').setView([37.576044, 126.977019], 15);
    
    var tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        minZoom: 1,
        maxZoom: 19,
        attribution: '© OpenStreetMap'
    }).addTo(map);

    // 声明变量保存GeoJSON图层
    var geoJsonLayer;
    
    $.ajax('http://localhost:8888/geoserver/TestWorkspace/wfs', {
        type : 'GET',
        data : {
            service : 'WFS',
            version : '1.1.1',
            request : 'GetFeature',
            typename : 'TestWorkspace:Test',
            srsname : 'EPSG:4326',
            outputFormat : 'json'
        },
        dataType : 'json',
        transparent : true,
        success : function(data) {
            // 保存图层实例到变量
            geoJsonLayer = L.geoJson(data).addTo(map);
        },
        error : function(e) {
            console.log("err : " + e);
        }
    });
    
    //click for max zoom
    map.on('click', function() {
        // 先判断图层是否已加载完成，避免报错
        if (geoJsonLayer) {
            map.fitBounds(geoJsonLayer.getBounds());
        }
    });
</script>

额外说明： #

• 加入了图层存在性判断，防止用户在GeoJSON还没加载完成时点击地图导致报错
• 如果你的WFS返回多个多边形，getBounds()会返回所有要素的整体边界，实现全图缩放

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