如何使用 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 变量适用于函数范围，因此您需要为每个标记侦听器调用一个函数来创建正确的变量引用。您可以使用匿名函数as seen here，或者定义一个函数来创建点击监听器：

多个信息窗口：

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

您很可能不希望同时打开多个 InfoWindow，因为必须单击关闭 x 很烦人。那么您将只需要一个 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);
  });
}

Answer 2

这是您可以添加弹出内容的区域

var infowindow = new google.maps.InfoWindow({
                content: "Add your popup content here"
              });

这是用于显示您的弹出窗口

marker.addListener('click', function() {
          infowindow.open(map, marker);
        });

下面的代码展示了它的工作和使用方式。

features.forEach(function(feature) {
          var infowindow = new google.maps.InfoWindow({
                    content: "Add your popup content here"
                  });
            var marker = new google.maps.Marker({
            position: new google.maps.LatLng(lat,long),
            icon: "image.png",
            /*icon: icons[feature.type].icon,*/
            title: "Title for marker",
            map: map
          });
          marker.addListener('click', function() {
          infowindow.open(map, marker);
        });
        });

Answer 3

var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
              position: myLatLng,
              ....
              content: point[4]
          });
google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(this.content);
            infowindow.open(map, this);
          });

循环内的代码。这对我来说非常有效。

Answer 4

那是因为变量i没有在循环中使用，但是当点击标记时——然后i等于最后一个索引+1...addListener是异步的，而不是同步的。

删除infowindow.setContent('test: ' + i + ''); 并将content: " " 替换为content: 'test: ' + i。这应该可以解决您的问题。