Question

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

这是pin数组：

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);
    });
}
}

Answer 1

感谢variable hoisting，所有这些marker和infowindow引用都是相同的变量，其声明基本上被移到了顶部包含功能。

您需要将处理程序创建包装在匿名函数中，或者只需将其移动到单独的常规函数中。 e.g。

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);
}

仅显示第二个引脚

1 个答案: