Google Maps点击marker显示地址：点击无响应的实现方法咨询

嘿，我懂你的困扰——Google Maps默认确实不会自动给Marker绑定地址弹窗，得咱们手动写点代码来实现～下面我给你一步步拆解怎么做：

1. 确保加载正确的API库 #

首先，加载Google Maps JavaScript API的时候，一定要包含geocoding库，因为我们需要用它把经纬度转成实际地址。你的脚本标签应该长这样：

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

记得把YOUR_API_KEY替换成你自己的Google Cloud API密钥，而且要确保这个密钥已经启用了Maps JavaScript API和Geocoding API，不然会有权限报错哦。

2. 初始化地图并给Marker绑定点击事件 #

接下来是核心的JavaScript代码，我给你写了完整的示例，你可以直接参考：

function initMap() {
  // 初始化地图，这里设北京为默认中心，你可以改成自己需要的坐标
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 10,
    center: { lat: 39.9042, lng: 116.4074 },
  });

  // 假设这是你的Marker数据数组，每个元素包含纬度和经度
  const markersData = [
    { lat: 39.9042, lng: 116.4074 },
    { lat: 31.2304, lng: 121.4737 },
    // 这里可以加更多你的Marker数据
  ];

  // 创建Geocoder实例，用来做反向地理编码（坐标转地址）
  const geocoder = new google.maps.Geocoder();

  // 循环创建每个Marker并绑定点击事件
  markersData.forEach(markerInfo => {
    const marker = new google.maps.Marker({
      position: markerInfo,
      map: map,
    });

    // 给Marker添加点击监听
    marker.addListener("click", () => {
      // 调用Geocoding API获取地址
      geocoder.geocode({ location: markerInfo }, (results, status) => {
        if (status === "OK") {
          if (results[0]) {
            // 创建信息窗口，把地址放进去
            const infoWindow = new google.maps.InfoWindow({
              content: results[0].formatted_address,
            });
            // 在Marker上方打开信息窗口
            infoWindow.open(map, marker);
          } else {
            alert("没找到对应的地址哦");
          }
        } else {
          alert(`地理编码出错啦：${status}`);
        }
      });
    });
  });
}

3. 可选优化：提前缓存地址（避免API配额问题） #

如果你有很多Marker，每次点击都调用Geocoding API可能会触发配额限制（Google的API有调用次数上限）。建议你提前把地址存在Marker数据里，这样点击时直接用缓存好的地址，不用再调用API：

// 修改你的Marker数据数组，加入预先获取的地址
const markersData = [
  { lat: 39.9042, lng: 116.4074, address: "北京市东城区天安门广场" },
  { lat: 31.2304, lng: 121.4737, address: "上海市黄浦区人民广场" },
];

// 然后在点击事件里直接用缓存的地址
marker.addListener("click", () => {
  const infoWindow = new google.maps.InfoWindow({
    content: markerInfo.address,
  });
  infoWindow.open(map, marker);
});

这样改完之后，你点击Marker就会弹出对应的地址啦～如果还有问题，检查下API密钥的权限，或者看看控制台有没有报错信息，一般都能快速定位问题。

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