Google Maps标记聚类：适配对象数组的下拉菜单及InfoWindow修复

我帮你排查了代码里的几个关键问题，这些问题导致下拉菜单选中后无法打开对应的InfoWindow，下面逐一分析并给出修复方案：

问题分析 #

• 重复创建标记：你在initMap里已经创建了标记数组并加入聚类器，但又在全局通过for循环调用addMarker再次创建了一批标记，下拉菜单关联的是这批未加入聚类的标记，和地图上显示的不是同一批，自然无法触发正确的弹窗。
• gmarkers数组存错对象：addMarker里把location数据对象push到了gmarkers，但后续myclick函数需要操作的是Marker实例（调用getPosition()、触发click事件），存成location对象会导致方法调用失败。
• 事件监听绑定错误：addMarker里把点击事件绑在了location对象上，而不是创建的marker实例，这完全无效。
• 全局map变量未正确赋值：initMap里的map是局部变量，导致全局的map变量是undefined，后续操作会出错。
• 冗余的InfoWindow创建：代码里同时创建了info和infoWin两个InfoWindow，没必要，统一用一个即可避免冲突。

修复后的完整代码 #

<script type="text/javascript">
var map;
var infoWin = new google.maps.InfoWindow(); // 统一用一个InfoWindow
var gmarkers = [];
var side_bar_html = "";

function initMap() {
  // 给全局map变量赋值，不再用局部var
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 1, lng: 1},
    zoom: 3,
    minZoom: 1,
    maxZoom: 16,
    mapTypeControl: false,
    streetViewControl: false,
    scrollwheel: false
  });

  // 创建标记并同时生成下拉菜单选项
  var markers = locations.map(function(location, i) {
    var marker = new google.maps.Marker({
      position: location,
      title: location.title,
      icon: '<?php echo get_template_directory_uri(); ?>/images/location-marker.png'
    });

    // 给标记绑定点击事件
    google.maps.event.addListener(marker, 'click', function(evt) {
      infoWin.setContent(location.info);
      infoWin.open(map, marker);
    });

    // 将marker实例存入gmarkers，同时生成下拉选项
    gmarkers.push(marker);
    side_bar_html += '<option value=' + i + '>' + location.title + '</option>';

    return marker;
  });

  // 初始化聚类器并添加标记
  var markerCluster = new MarkerClusterer(map, markers, { 
    imagePath: '../images/m' 
  });
  markerCluster.setStyles(markerCluster.getStyles().map(function (style) {
    style.textColor = '#fff';
    return style;
  }));

  // 生成下拉菜单
  document.getElementById("side_bar").innerHTML = `
    <select onchange='myclick(this.value);' name="country" class="wpcf7-form-control wpcf7-select form-control" aria-invalid="false">
      <option value="">Please choose your country...</option>
      ${side_bar_html}
    </select>
  `;
}

// 下拉菜单点击触发函数
function myclick(i) {
  if (!i) return; // 处理默认选项的情况
  // 移动地图到标记位置并触发标记的点击事件
  map.setCenter(gmarkers[i].getPosition());
  google.maps.event.trigger(gmarkers[i], "click");
}

// 位置数据
var locations = [
  { title: "Marker 1", lat: 0, lng: 0, info: "Info Window 1" },
  { title: "Marker 2", lat: 0, lng: 1, info: "Info Window 2" },
  { title: "Marker 3", lat: 0, lng: 2, info: "Info Window 3" },
  { title: "Marker 4", lat: 1, lng: 0, info: "Info Window 4" },
  { title: "Marker 5", lat: 1, lng: 1, info: "Info Window 5" },
  { title: "Marker 6", lat: 1, lng: 2, info: "Info Window 6" },
];

google.maps.event.addDomListener(window, "load", initMap);
</script>

关键修复点说明 #

1. 移除重复的标记创建逻辑：把生成标记、绑定事件、生成下拉选项的逻辑都整合到initMap里的map循环中，避免重复创建标记。
2. gmarkers存储Marker实例：确保gmarkers里存的是真正的Marker对象，这样myclick里的方法调用才能生效。
3. 统一InfoWindow实例：只用一个infoWin，避免多个弹窗冲突。
4. 正确赋值全局map变量：去掉initMap里map的var，让全局变量能拿到地图实例。
5. 优化下拉菜单生成：用模板字符串让代码更清晰，同时处理默认选项的空值情况。

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