使用Google Maps热力图时，调用codeAddress填充数组后返回为空求原因

嘿，这个问题我之前踩过坑！核心原因是Google Maps的地理编码服务是异步执行的，咱们一步步捋清楚：

问题根源：异步操作的时序问题 #

你调用的codeAddress函数里，肯定是用到了google.maps.Geocoder().geocode()方法吧？这个方法不会立刻返回地理编码结果——它会先发起网络请求，等Google服务器返回数据后，才会在回调函数里处理结果、把LatLng对象塞进locationsList。

而你现在的逻辑是：刚发起几次codeAddress调用，就立刻去调用getPoints返回locationsList。这时候所有的地理编码请求还在等待响应，push操作根本没执行，数组自然是空的。

举个直观的例子，你的codeAddress大概率是类似这样的结构：

function codeAddress(address) {
  const geocoder = new google.maps.Geocoder();
  // 这里的geocode是异步方法，回调会在未来某个时间触发
  geocoder.geocode({address: address}, function(results, status) {
    if (status === 'OK') {
      // 这个push是异步执行的，不会立刻生效
      locationsList.push(results[0].geometry.location);
      counter++;
    }
  });
}

解决思路：等待所有异步操作完成再读取数组 #

我们需要把异步的地理编码请求统一管理，等所有请求都完成后，再去处理locationsList。最清晰的方式是用Promise封装+async/await：

var locationsList = [];

// 把codeAddress改成返回Promise的函数，方便管理异步流程
function codeAddress(address) {
  return new Promise((resolve, reject) => {
    const geocoder = new google.maps.Geocoder();
    geocoder.geocode({address: address}, function(results, status) {
      if (status === 'OK') {
        const latLng = results[0].geometry.location;
        locationsList.push(latLng);
        resolve(latLng);
      } else {
        reject(new Error(`地址编码失败：${address}，状态码：${status}`));
      }
    });
  });
}

// 用async函数等待所有编码完成
async function getPoints() {
  // 把需要编码的地址都列出来
  const targetAddresses = [
    "APIAI, SP, Brasil",
    "Avaré, SP, Brasil"
    // 其他需要编码的地址...
  ];

  // 等待所有地址编码请求完成
  await Promise.all(targetAddresses.map(address => codeAddress(address)));

  // 到这里，所有LatLng都已经塞进locationsList了
  return locationsList;
}

// 实际使用的时候，这样调用
getPoints().then(points => {
  // 这里可以放心地用points创建热力图
  const heatmap = new google.maps.visualization.HeatmapLayer({
    data: points,
    map: yourMapInstance // 替换成你的地图实例
  });
}).catch(err => {
  console.error('处理过程出错：', err);
});

额外提示 #

别忘了Google Maps地理编码有调用配额限制，如果批量处理大量地址，要注意错误处理和请求频率，避免触发限流。

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