Google Maps 实现点击外部位置列表项触发对应Marker的InfoWindow

当前代码存在两个关键问题，导致无法实现列表点击联动：

• 循环过程中生成的Marker、InfoWindow都是临时局部变量，没有和对应的表格条目建立持久的关联引用
• 全局的marker变量在循环迭代中会被不断覆盖，最终仅保留最后一个位置的Marker引用

按以下步骤改造即可实现需求。

核心改造步骤 #

1. 建立全局实例存储
   在位置渲染循环的外部，提前定义一个存储对象，用来按唯一id映射每个位置对应的Marker、InfoWindow实例：

   // 放在所有循环逻辑的最外层
   const markerInstances = {};
   

2. 改造表格行渲染逻辑
   给每个动态生成的<tr>绑定对应位置的唯一id作为data属性，同时加上可点击的样式提示：

   var mark = '<tr data-location-id="'+ids+'" style="cursor: pointer;">'+
       '<td><img src="<?= base_url(); ?>assets/addon-media/red-marker.png"> '+location+'</td>'+
   '</tr>';
   $('#maploc').append(mark);
   

3. 循环过程中绑定实例到存储对象
   生成对应位置的Marker、InfoWindow之后，把实例存入之前定义的全局存储中，和位置id做映射：

   // 原有Marker、InfoWindow生成逻辑之后追加
   markerInstances[ids] = {
       marker: marker,
       infoWindow: infowindow
   };
   

4. 绑定表格点击的联动逻辑
   因为表格行是动态生成的，所以用事件委托的方式在静态存在的#maploc容器上绑定点击事件，触发后找到对应id的实例，完成视角移动和InfoWindow弹出：

   $('#maploc').on('click', 'tr', function() {
       const targetId = $(this).data('location-id');
       const target = markerInstances[targetId];
       // 匹配不到对应实例时直接返回，避免报错
       if (!target) return;
       // 平滑移动地图视角到对应Marker位置
       map.panTo(target.marker.getPosition());
       // 打开匹配的InfoWindow，效果和手动点击Marker完全一致
       target.infoWindow.open(map, target.marker);
   });
   

优化细节 #

• 同一时间Google Maps的InfoWindow只会保留一个打开状态，不需要手动编写逻辑关闭之前弹出的窗口
• 可以在点击事件里补充简单的样式反馈：移除所有表格行的高亮类，给当前点击的行加上table-active类，让列表选中状态和地图弹窗的状态保持对应
• 避免循环中单独给每个<tr>绑定点击事件，用事件委托的性能更优，后续动态新增位置条目时不需要重复绑定事件
• 注意原来的循环用var声明临时变量的特性，必须用位置的唯一id作为存储键，不能靠循环索引i存实例，否则会触发闭包变量共享的经典bug，所有点击最后都会触发最后一个位置的弹窗。

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