jQuery $.when()函数失效：经纬度转可读地址仅显示默认值

看起来你踩了Google Maps Geocoder异步处理的一个常见坑——它的geocode()方法是基于普通回调的异步操作，不会返回jQuery Deferred或原生Promise对象，所以你直接把它传给$.when()的话，$.when()会误以为这个操作已经完成，立刻执行后续的逻辑，这时候地址还没转换好，自然只会显示默认值'xxx'。

修复思路：把Geocoder调用包装成Promise #

要让$.when()能正确等待地址转换完成，我们需要把Geocoder的回调式调用包装成一个Promise，这样就能和jQuery的Deferred体系兼容了。

完整修复代码 #

首先，封装一个返回Promise的地址转换函数：

function getAddressFromLatLng(lat, lng) {
  const geocoder = new google.maps.Geocoder();
  // 返回一个Promise对象
  return new Promise((resolve, reject) => {
    geocoder.geocode(
      { location: { lat: lat, lng: lng } },
      (results, status) => {
        if (status === google.maps.GeocoderStatus.OK) {
          // 取第一个匹配的格式化地址
          if (results[0]) {
            resolve(results[0].formatted_address);
          } else {
            reject(new Error("没有找到匹配的地址"));
          }
        } else {
          reject(new Error(`地址转换失败：${status}`));
        }
      }
    );
  });
}

然后，用$.when()来等待转换完成：

const lat1 = 39.983313, lon1 = -0.031963;

// 用$.when()等待Promise完成
$.when(getAddressFromLatLng(lat1, lon1))
  .done((formattedAddress) => {
    // 这里地址已经转换完成，放心显示
    console.log("转换后的地址：", formattedAddress);
    // 比如把地址插入到页面元素中：
    // $("#address-display").text(formattedAddress);
  })
  .fail((error) => {
    // 处理转换失败的情况，比如显示默认值或错误提示
    console.error(error.message);
    // $("#address-display").text("xxx");
  });

额外注意事项 #

• 确保你的Google Maps API加载URL包含了Geocoding库，比如：

  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geocoding"></script>
  

• Google Geocoding API有请求配额限制，如果批量转换地址要注意不要超出配额
• 如果需要转换多个坐标，可以把多个Promise放进数组，用$.when.apply($, promiseArray)来等待所有转换完成

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