通过GeoNames获取国家代码触发change事件时Leaflet地图报错排查

核心错误点分析 #

1. 变量引用错误（直接触发失效） #

你在触发下拉框change事件时，错误地将字符串'currCode'传给了val()方法，而非引用变量currCode：

// 错误写法：将字符串'currCode'设为选中值，下拉框无此选项，val()返回null
$('#countrySelect').val('currCode').change();   
// 正确写法：引用变量currCode
$('#countrySelect').val(currCode).change();   

这个错误会导致下拉框选中无效值，后续filter(a => a.properties.iso_a3 === name)无法匹配任何数据，filterData[0]为undefined。L.geoJSON(undefined)创建的图层无地理特征，调用getBounds()自然会抛出"Bounds are not valid"错误。

2. 国家代码格式不匹配（隐藏逻辑错误） #

下拉框选项的value是三位ISO 3166-1 alpha-3代码（如CHN、USA），但GeoNames接口返回的是两位ISO 3166-1 alpha-2代码（如CN、US），两者格式不匹配。即使修正变量引用，依然会出现filterData为空的情况。

解决方式二选一：

• 调整下拉框填充逻辑：若GeoJSON数据的properties中包含两位代码字段（如iso_a2），将选项value改为该字段：

  value: result.data.border.features[i].properties.iso_a2,
  

• 修改PHP接口：调用GeoNames的countryInfoJSON接口获取三位代码，或在PHP中维护两位转三位的映射表，将返回的countryCode转换为三位格式。

额外优化建议 #

1. 增加空数据判断 #

在加载边界的代码中，增加filterData为空的判断，避免无匹配数据时报错：

success: function(result) {
  const filterData = result.data.border.features.filter((a) => (a.properties.iso_a3 === name));
  if(filterData.length === 0) {
    console.log('未找到对应国家的边界数据');
    return;
  }
  // 移除旧边界图层，避免重复叠加
  if(border) map.removeLayer(border);
  border = L.geoJSON(filterData[0]).addTo(map); 
  map.fitBounds(border.getBounds());      
},

2. 确保下拉框填充完成后再触发事件 #

当前获取坐标的逻辑与下拉框填充的AJAX并行执行，可能出现下拉框未加载完成就触发change的情况。可将触发逻辑放在下拉框填充完成的回调中：

// 封装下拉框加载为Promise
function loadCountrySelect() {
  return new Promise((resolve) => {
    $.ajax({
      url: "libs/php/geoJson.php",
      type: "POST",
      dataType: "json",
      success: function(result) {
        for (var i=0; i<result.data.border.features.length; i++) {
          $('#countrySelect').append($('<option>', {
              value: result.data.border.features[i].properties.iso_a3,
              text: result.data.border.features[i].properties.name,
          }));
        }
        resolve();
      }
    });
  });
}

// 等待下拉框加载完成后再获取坐标
loadCountrySelect().then(() => {
  navigator.geolocation.getCurrentPosition(success);
});

总结 #

先修正变量引用错误，再解决国家代码格式不匹配问题，最后增加空数据判断和加载顺序控制，即可解决"Bounds are not valid"报错。

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