Google Maps：指定关联Marker触发SnazzyInfoWindow显示

我来帮你解决这个问题！核心问题在于你之前用的newevent变量最后指向的是循环创建的最后一个Marker（也就是编号5的那个），所以直接填它只会关联第5个Marker。要关联编号3的特定Marker，我们需要先获取到这个Marker的引用，具体步骤如下：

步骤1：给Marker添加编号标识 #

首先确保你在创建Marker的时候，把每个Marker对应的编号（也就是beaches数组里的第5个元素）存到Marker对象里，这样之后能快速找到目标Marker：

// 补全你的Marker创建循环代码
var markers = [];
for (var i = 0; i < beaches.length; i++) {
  var beach = beaches[i];
  var newevent = new google.maps.Marker({
    position: new google.maps.LatLng(beach[1], beach[2]),
    map: map,
    category: beach[3],
    id: beach[4] // 新增编号属性，对应beaches里的第5项
  });
  markers.push(newevent);
}

步骤2：获取编号3的Marker引用 #

遍历markers数组，找到编号为3的Marker：

// 找到id为3的目标Marker
var targetMarker = markers.find(function(marker) {
  return marker.id === 3;
});
// 支持ES6的话可以简化为：
// var targetMarker = markers.find(marker => marker.id === 3);

步骤3：关联Marker到SnazzyInfoWindow #

现在把找到的targetMarker填到marker:字段里就可以了：

var info = new SnazzyInfoWindow({ 
  marker: targetMarker, // 这里填入目标Marker引用
  placement: 'right', 
  offset: { left: '20px' }, 
  // 你的其他配置项...
});

额外优化：点击Marker时才打开窗口（更贴合需求） #

如果你的需求是点击编号3的Marker时才弹出窗口，而不是页面加载就显示，那应该给目标Marker绑定点击事件，在点击时创建并打开窗口：

// 找到目标Marker
var targetMarker = markers.find(marker => marker.id === 3);

// 绑定点击事件
google.maps.event.addListener(targetMarker, 'click', function() {
  // 点击时创建并打开窗口，this指向被点击的Marker
  new SnazzyInfoWindow({ 
    marker: this,
    placement: 'right', 
    offset: { left: '20px' },
    content: '<div>这里是编号3的Marker专属信息</div>', // 自定义窗口内容
    // 其他配置...
  }).open();
});

为什么之前填newevent会显示第5个Marker的窗口？ #

因为在循环创建Marker的过程中，newevent变量会被反复赋值，循环结束后它最后一次指向的是第5个Marker（对应beaches数组的最后一项，i=4），所以直接使用它会关联最后一个Marker，而不是你想要的编号3的那个。

内容的提问来源于stack exchange，提问作者Tomáš Tichý