如何在JavaScript中读取Google Maps地理编码返回的对象数据

嘿，我看了你的代码，问题出在异步操作的执行顺序上！你现在的代码里，alert(response)和那些读取<pre>元素的逻辑，是在地理编码请求还没完成的时候就跑了，这时候自然拿不到数据。

核心问题：异步Promise的执行时机 #

geocoder.geocode()是一个异步操作，它返回的是一个Promise——简单说就是这个请求会在后台发送，等Google服务器返回结果后，才会执行.then()里面的代码。而你现在把处理数据的代码写在了.then()的外面，相当于“还没等外卖送到就去开门拿餐”，当然啥都没有。

正确的处理方式：把数据逻辑移到.then()内部 #

你完全不需要绕弯去读<pre>元素的内容，直接在.then()里用Google返回的原始对象就好，这比解析JSON字符串靠谱多了！

比如修改你的geocode函数，把数据处理逻辑放到then回调里：

function geocode(request) {
  clear();
  geocoder
    .geocode(request)
    .then((result) => {
      const { results } = result;

      map.setCenter(results[0].geometry.location);
      marker.setPosition(results[0].geometry.location);
      marker.setMap(map);
      response.innerText = JSON.stringify(result, null, 2);

      // 在这里直接处理返回的数据！
      // 1. 获取点击/搜索位置的经纬度
      const location = results[0].geometry.location;
      const latitude = location.lat(); // 注意：LatLng对象要用lat()方法拿数值
      const longitude = location.lng(); // 同理用lng()方法

      // 2. 这里可以做你需要的其他处理
      alert(`点击的位置经纬度：${latitude}, ${longitude}`);
      console.log("完整的地理编码结果：", result);
      console.log("格式化地址：", results[0].formatted_address);

      return results;
    })
    .catch((e) => {
      alert("Geocode was not successful for the following reason: " + e);
    });

  // 原来这里的alert和readPreElement()都要删掉，因为它们会在异步请求完成前执行
}

为什么不用读<pre>元素？ #

你之前把result转成JSON字符串塞到<pre>里是为了展示，但直接用原始的result对象操作更方便——它是一个JavaScript对象，你可以直接点取里面的属性，比如results[0].address_components能拿到详细的地址组件（国家、城市、街道等），results[0].geometry.bounds能拿到该位置的边界范围，这些都比解析JSON字符串高效且不易出错。

额外提醒：LatLng对象的用法 #

Google Maps的LatLng对象（就是results[0].geometry.location）不是普通的{lat: xxx, lng: xxx}对象，它的经纬度需要通过lat()和lng()方法来获取数值，不能直接用location.lat（那样拿到的是函数本身，不是数值）。

这样修改后，你就能在地理编码请求完成后，正确拿到经纬度和其他数据做后续处理啦！

备注：内容来源于stack exchange，提问作者Jon Kreski