只显示第二个pin的信息窗口

Only showing the info window of second pin

本文关键字：信息 信息窗 窗口 pin 显示 第二个      更新时间：2023-09-26

在我将信息窗口添加到引脚阵列后，当我单击第二个引脚时，infowindow会在第一个引脚上弹出。当我点击第一个引脚时，第二个引脚的infowindow弹出。

这是引脚阵列：

function setMarkers(map) {
// Adds markers to the map.
var image = {
    url: 'http://localhost:8888/wp-content/plugins/wp_cat_map/assets/img/home_pin.png',
    size: new google.maps.Size(35, 42),
    origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(0, 42)
};
var shape = {
    coords: [0, 0, 35, 42],
    type: 'rect'
};
for (var i = 0; i < thePins.length; i++) {
    var pin = thePins[i];
    var contentString = pin[0];
    var infowindow = new google.maps.InfoWindow({
        content: contentString,
        maxWidth: 200
    });
    var marker = new google.maps.Marker({
        position: {lat: pin[1], lng: pin[2]},
        map: map,
        icon: image,
        //shape: shape,
        title: pin[0],
        zIndex: pin[3]
    });
    marker.addListener('click', function() {
        infowindow.open(map, marker);
    });
}
}

由于变量提升，所有marker和infowindow引用都指向相同的变量，其声明基本上被移到包含函数的顶部。

您要么需要将创建的处理程序包装在匿名函数中，要么将其移动到一个单独的常规函数中。例如

function addMarker(pin, map, image, contentString) {
  var infowindow = new google.maps.InfoWindow({
    content: contentString,
    maxWidth: 200
  });
  var marker = new google.maps.Marker({
    position: {lat: pin[1], lng: pin[2]},
    map: map,
    icon: image,
    title: pin[0],
    zIndex: pin[3]
  });
  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });
}
for (var i = 0; i < thePins.length; i++) {
  var pin = thePins[i];
  var contentString = pin[0];
  addMarker( pin, map, image, contentString);
}
相关文章：