如何使用Google Maps API在标记上设置弹出窗口？

Question

我有这个代码,我显示和设置我所有的标记.如何使用此代码添加带有标记信息的弹出窗口？我在文本上添加了"i"变量,但它在所有标记上设置弹出"test - 723",其中723是"i"变量的最后一个值.怎么了？

for (var i = 0; i < arraylng.length-1; i++) {
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(arraylng[i], arraylat[i])
  });
  var infowindow = new google.maps.InfoWindow({
    content: " "
  });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent('test: ' + i + '');
    infowindow.open(map, this);
  });
  markers.push(marker);
}

Answer 1

首先,将循环条件更改为i < arraylng.length.现在它没有捕获数组的最后一个元素.

JavaScript变量与函数作用域一起使用,因此您需要为每个标记侦听器调用一个函数来创建正确的变量引用.您可以使用匿名函数,如此处所示,或定义用于创建单击侦听器的函数:

多个infoWindows:

function makeInfoWindowEvent(map, infowindow, marker) {
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map, marker);
  });
}

很可能你不会想要同时打开多个InfoWindow,因为必须点击关闭是很烦人的x.然后,您只需要一个InfoWindow对象,并在单击标记时设置内容:

单个InfoWindow:

...
  var infowindow = new google.maps.InfoWindow();

  for (var i = 0; i < arraylng.length-1; i++) {
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(arraylng[i], arraylat[i]),
      map: map
    });

    makeInfoWindowEvent(map, infowindow, "test" + i, marker);

    markers.push(marker);
  }
}

function makeInfoWindowEvent(map, infowindow, contentString, marker) {
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(contentString);
    infowindow.open(map, marker);
  });
}