如何用Fusion Table的信息窗口替换Autocomplete API标记

嘿，这个需求我之前做类似项目时也碰到过，核心思路就是当Autocomplete定位完成后，通过经纬度查询Fusion Tables里对应的服务区域数据，再用和你区域点击时一致的信息窗口来替换默认标记的窗口。下面给你一步步拆解实现方法：

核心步骤 #

1. 在Autocomplete的回调中触发Fusion Tables查询 #

当用户通过Autocomplete选择地址后，先拿到标记的经纬度，然后用Fusion Tables的ST_CONTAINS函数判断该点是否在某个服务区域内，进而获取对应联系人数据。

示例代码：

// 假设你已经初始化了map、autocomplete实例，以及全局marker变量
autocomplete.addListener('place_changed', function() {
  const place = autocomplete.getPlace();
  if (!place?.geometry?.location) {
    alert("无法获取该地址的位置信息");
    return;
  }

  // 移除之前的标记（避免地图上多个标记堆积）
  if (marker) marker.setMap(null);
  
  // 创建定位标记（先添加到地图，后续绑定信息窗口）
  marker = new google.maps.Marker({
    map: map,
    position: place.geometry.location,
    title: place.name
  });

  // 提取经纬度
  const lat = place.geometry.location.lat();
  const lng = place.geometry.location.lng();
  
  // 构造Fusion Tables查询语句：查找包含当前点的服务区域
  const fusionTableId = "YOUR_FUSION_TABLE_ID"; // 替换成你的表ID
  const sqlQuery = `SELECT * FROM ${fusionTableId} WHERE ST_CONTAINS(geometry, LATLNG(${lat}, ${lng}))`;

  // 初始化Fusion Tables服务
  const fusionService = new google.maps.FusionTablesService();
  
  // 执行查询
  fusionService.query({
    sql: sqlQuery,
    callback: handleFusionQueryResult,
    errorCallback: (err) => console.error("Fusion Tables查询失败:", err)
  });
});

2. 处理查询结果，生成统一的信息窗口 #

这里可以复用你点击服务区域时的信息窗口模板，保证样式和内容一致性。

// 处理Fusion Tables查询结果的回调函数
function handleFusionQueryResult(response) {
  if (!response?.rows?.length) {
    // 该点不在任何服务区域内
    const noCoverageWindow = new google.maps.InfoWindow({
      content: "<p>抱歉，该地址不在我们的服务覆盖范围内</p>"
    });
    noCoverageWindow.open(map, marker);
    return;
  }

  // 将查询结果映射为对象（用列名对应值，更易维护）
  const columns = response.columns;
  const regionData = {};
  response.rows[0].forEach((value, index) => {
    regionData[columns[index]] = value;
  });

  // 复用你已有的信息窗口构建函数（和区域点击时用的一样）
  const windowContent = buildInfoWindow(regionData);
  
  // 创建信息窗口并绑定到标记
  const infoWindow = new google.maps.InfoWindow({
    content: windowContent
  });

  // 绑定点击事件（和区域的交互逻辑一致）
  marker.addListener('click', () => infoWindow.open(map, marker));
  // 自动打开窗口（可选，模拟Autocomplete默认行为）
  infoWindow.open(map, marker);
}

// 复用的信息窗口构建函数（替换成你实际的内容模板）
function buildInfoWindow(data) {
  return `
    <div class="custom-info-window">
      <h3>${data.联系人姓名}</h3>
      <p>📞 联系电话：${data.电话}</p>
      <p>📍 服务区域：${data.区域名称}</p>
      <p>📧 邮箱：${data.邮箱}</p>
    </div>
  `;
}

关键注意事项 #

• 权限设置：确保你的Fusion Tables已经设置为公开可查询，或者你在调用API时使用了带有Fusion Tables权限的API密钥（私有表需要授权）。
• 列名匹配：buildInfoWindow里的data.联系人姓名等字段要和你Fusion Tables中的列名完全一致，或者调整查询语句只返回需要的列。
• 性能优化：如果服务区域很多，可以考虑对查询结果做缓存，避免重复请求。

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