Leaflet调用fitBounds报“Bounds are not valid”错误排查

开发者阿泽

2026-8-24

问题原因及解决办法

核心原因

你遇到的问题根源在于Nominatim返回的JSON结构不是直接可用的GeoJSON对象：

示例接口返回的是一个JSON数组，数组中的每个元素是搜索结果条目；
真正的边界GeoJSON数据嵌套在每个条目的geojson字段里，而非整个响应本身就是GeoJSON。

直接把整个响应数组传给L.geoJson()的话，Leaflet无法识别有效地理要素，导致图层没有可计算范围的内容，layer.getBounds()自然返回undefined，调用fitBounds()就会抛出“Bounds are not valid.”错误。

解决步骤

提取正确的GeoJSON数据：从返回的数组中取出目标结果的geojson字段值；
创建有效图层：将提取出的GeoJSON对象传入L.geoJson()；
执行适配操作：此时图层已包含有效地理要素，即可正常调用fitBounds()。

代码示例

以原生JavaScript的fetch为例：

// 发起请求获取数据
fetch('https://nominatim.openstreetmap.org/search?country=it&polygon_geojson=1&format=json')
  .then(response => response.json())
  .then(data => {
    // 提取第一个结果的边界GeoJSON
    const countryGeoJson = data[0].geojson;
    // 创建Leaflet GeoJSON图层
    const countryLayer = L.geoJson(countryGeoJson).addTo(map);
    // 让地图适配边界范围
    map.fitBounds(countryLayer.getBounds());
  });

如果使用jQuery的Ajax：

$.ajax({
  url: 'https://nominatim.openstreetmap.org/search?country=it&polygon_geojson=1&format=json',
  dataType: 'json',
  success: function(data) {
    const countryGeoJson = data[0].geojson;
    const countryLayer = L.geoJson(countryGeoJson).addTo(map);
    map.fitBounds(countryLayer.getBounds());
  }
});