如何从FusionTablesLayer获取字符串列表并关联地图实现点击弹窗

我来帮你实现这个功能，核心思路是先从Fusion Table中获取数据生成可点击的列表，然后给每个列表项绑定事件，点击时在地图上定位并打开对应的信息窗口。下面是具体的修改步骤和完整代码：

步骤1：添加列表容器和样式 #

首先在HTML中添加一个用来显示位置列表的容器，同时调整地图和列表的布局样式，让两者合理展示：

<body>
  <style type="text/css">
    html, body { height: 100% !important; margin: 0; padding: 0; }
    #location-list {
      width: 300px;
      height: 100%;
      overflow-y: auto;
      float: left;
      padding: 10px;
      box-sizing: border-box;
      background: #f8f8f8;
    }
    #googft-mapCanvas { 
      height: 100% !important; 
      margin: 0; 
      padding: 0; 
      width: calc(100% - 300px) !important; 
      float: left;
    }
    .list-item {
      cursor: pointer;
      padding: 8px;
      border-bottom: 1px solid #eee;
      margin-bottom: 4px;
      transition: background 0.2s;
    }
    .list-item:hover {
      background: #eaeaea;
    }
  </style>
  <script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyBxMTfLhegh_rO8w0-vRP_oKdaJOvhOUUI"></script>
  <script type="text/javascript">
    // 初始化函数将在这里编写
  </script>
  <div id="location-list"></div>
  <div id="googft-mapCanvas"></div>
</body>

步骤2：修改JavaScript代码，获取数据并绑定点击事件 #

在初始化函数中，添加代码获取Fusion Table的数据、生成列表项，并给每个项绑定点击事件，实现地图定位和打开信息窗口的功能：

function initialize() {
  var isMobile = (navigator.userAgent.toLowerCase().indexOf('android') > -1) || (navigator.userAgent.match(/(iPod|iPhone|iPad|BlackBerry|Windows Phone|iemobile)/));
  if (isMobile) {
    var viewport = document.querySelector("meta[name=viewport]");
    viewport.setAttribute('content', 'initial-scale=1.0, user-scalable=no');
    // 移动端调整布局：列表显示在地图上方
    document.getElementById('location-list').style.width = '100%';
    document.getElementById('location-list').style.height = '200px';
    document.getElementById('googft-mapCanvas').style.width = '100%';
    document.getElementById('googft-mapCanvas').style.height = 'calc(100% - 200px)';
  }
  var mapDiv = document.getElementById('googft-mapCanvas');
  var map = new google.maps.Map(mapDiv, {
    center: new google.maps.LatLng(56.32085914650647, 62.40977352913535),
    zoom: 4,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend-open'));
  map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend'));

  // 初始化FusionTablesLayer（保留原有配置）
  var layer = new google.maps.FusionTablesLayer({
    map: map,
    heatmap: { enabled: false },
    query: {
      select: "col0",
      from: "1XlnmbK0m0s4rHdadG_hkmZP-dSr2ruBzQxnMK4Uv",
      where: ""
    },
    options: {
      styleId: 2,
      templateId: 2
    }
  });

  // 移动端图例控制（保留原有逻辑）
  if (isMobile) {
    var legend = document.getElementById('googft-legend');
    var legendOpenButton = document.getElementById('googft-legend-open');
    var legendCloseButton = document.getElementById('googft-legend-close');
    legend.style.display = 'none';
    legendOpenButton.style.display = 'block';
    legendCloseButton.style.display = 'block';
    legendOpenButton.onclick = function() {
      legend.style.display = 'block';
      legendOpenButton.style.display = 'none';
    }
    legendCloseButton.onclick = function() {
      legend.style.display = 'none';
      legendOpenButton.style.display = 'block';
    }
  }

  // --- 新增核心功能：生成位置列表并绑定点击事件 ---
  // 复用一个信息窗口，避免重复创建
  var infoWindow = new google.maps.InfoWindow();
  var fusionTableId = "1XlnmbK0m0s4rHdadG_hkmZP-dSr2ruBzQxnMK4Uv";
  
  // 请根据你的Fusion Table实际列名修改SELECT语句
  // 示例中col0=位置名称，col1=纬度，col2=经度，col3=信息内容（替换为你的实际列）
  var sqlQuery = "SELECT col0, col1, col2, col3 FROM " + fusionTableId;
  var apiUrl = "https://www.googleapis.com/fusiontables/v2/query?sql=" + encodeURIComponent(sqlQuery) + "&key=AIzaSyBxMTfLhegh_rO8w0-vRP_oKdaJOvhOUUI";

  // 调用Fusion Tables API获取数据
  fetch(apiUrl)
    .then(response => response.json())
    .then(data => {
      var rows = data.rows;
      var listContainer = document.getElementById('location-list');
      
      rows.forEach(row => {
        var locationName = row[0];
        var lat = parseFloat(row[1]);
        var lng = parseFloat(row[2]);
        // 用实际信息内容填充，没有则显示默认内容
        var infoContent = row[3] || `<h3>${locationName}</h3><p>坐标：${lat}, ${lng}</p>`;
        
        // 创建列表项元素
        var listItem = document.createElement('div');
        listItem.className = 'list-item';
        listItem.textContent = locationName;
        
        // 存储位置数据到元素属性中
        listItem.dataset.lat = lat;
        listItem.dataset.lng = lng;
        listItem.dataset.content = infoContent;
        
        // 绑定点击事件
        listItem.addEventListener('click', function() {
          var targetLatLng = new google.maps.LatLng(this.dataset.lat, this.dataset.lng);
          
          // 移动地图到目标位置并调整缩放
          map.panTo(targetLatLng);
          map.setZoom(10);
          
          // 打开信息窗口，隐藏临时标记只显示气泡
          infoWindow.setContent(this.dataset.content);
          infoWindow.open(map, new google.maps.Marker({
            position: targetLatLng,
            map: map,
            visible: false
          }));
        });
        
        listContainer.appendChild(listItem);
      });
    })
    .catch(error => console.error('加载位置数据失败:', error));
}
google.maps.event.addDomListener(window, 'load', initialize);

关键注意事项 #

1. 列名调整：请根据你的Fusion Table实际列名修改SELECT语句中的列（比如col0、col1等），确保能获取到名称、坐标和信息内容。
2. API权限：确保你的Google API Key已经在Google Cloud Console中启用了Fusion Tables API，否则无法获取数据。
3. 自定义优化：你可以根据需求调整列表样式、信息窗口内容、地图缩放级别等参数，让效果更贴合你的预期。

这样修改后，就能实现左侧（移动端顶部）显示位置列表，点击任意项后地图自动定位并打开对应信息气泡的效果啦。

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