使用infowindows添加多个标记(Google Maps API)

Question

我目前正在使用以下代码,使用他们的API在Google Map上放置多个标记.

我遇到的问题是多个infowindows无法工作(只显示最后一个).

SO上有很多像我这样的问题.实际上做了一大堆问题:-)

举个例子:尝试将多个InfoWindows绑定到Google Map上的多个Markers并失败

我的问题的解决方案有点简单:只需将click监听器包含在(匿名)函数中.

但是我不明白的是为什么我的解决方案不起作用(将数组中的标记和infowindows保存而不是只保存一个变量).

    var markers = [];
    var infowindows = [];

    // add shops or malls
    for (var key in data.markers) {
      if (data.markers.hasOwnProperty(key)) {
        infowindows[key] = new google.maps.InfoWindow({
            content: data.markers[key].infowindow
        });

        markers[key] = new google.maps.Marker({
                position: new google.maps.LatLng(data.markers[key].location.lat, data.markers[key].location.lng),
                map: map,
                flat: true,
                title: data.markers[key].name,
                draggable: false
        });
        var iconFile = 'http://maps.google.com/mapfiles/ms/icons/'+marker_color+'-dot.png';
        markers[key].setIcon(iconFile);

        google.maps.event.addListener(markers[key], 'click', function() {
          infowindows[key].open(map, markers[key]);
        });
      }
    }

所以...我不知道如何得到解决方案如何使用一些函数来封闭监听器(尽管它应该工作,还没有测试它但是会),但我想知道为什么它如果我将标记和infowindows添加到数组中将无法工作.

Answer 1

Javascript有一种叫做"闭包"的语言结构.闭包是函数(例如您在上面声明的用于处理单击侦听器的函数(){},它捕获对外部变量的引用.

有很多资源可以比我更好地解释它们,我建议你咨询,但这是我最好的尝试:

在这个块中:

    google.maps.event.addListener(markers[key], 'click', function() {
      infowindows[key].open(map, markers[key]);
    });

因为"key"已经被定义为外部变量,所以该函数将捕获对该变量的引用.所以你期望的地方:

infowindows["helloworld"]

Javascript会将其解释为:

infowindows[reference to key]

当您单击标记时,它会查找"对键的引用"以查看键的当前值.因为在循环完成之前这可能不会发生,所以key将等于data.markers对象中的最后一个键.它将等于您添加的每个点击监听器的值.

正如您所指出的,解决方案是将其包装在匿名函数中,以使Javascript在添加单击侦听器时评估"key"的值.

  google.maps.event.addListener(markers[key], 'click', function(innerKey) {
      return function() {
          infowindows[innerKey].open(map, markers[innerKey]);
      }
    }(key));

Answer 2

这对我来说很好!只需向marker对象添加一个新属性,该属性包含infowindow对象.

var mytext = 'Infowindow contents in HTML'
var myinfowindow = new google.maps.InfoWindow({
    content: mytext
});

var marker = new google.maps.Marker({
    position: mypos,
    map: mymap,
    icon: myicon,
    title: mytitle,
    infowindow: myinfowindow
});

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

});

Answer 3

有一种稍微简单的方法来实现这一目标.您可以为标记添加自定义属性(信息窗口的索引)并在回调函数中引用它.示例如下:

    markers = Array();
    infoWindows = Array();

    for(var i in earthquakes)
    {
        var location = new google.maps.LatLng(earthquakes[i].geolat, earthquakes[i].geolong);
        var marker = new google.maps.Marker({
            position : location,
            map : map,
            animation : google.maps.Animation.DROP,
            infoWindowIndex : i //<---Thats the extra attribute
        });
        var content = "<h3>" + earthquakes[i].title + "<h3>" +
                "<a data-ajax='false' target='_blank' href='" + earthquakes[i].link + "'>Link to shakemap.</a>";
        var infoWindow = new google.maps.InfoWindow({
            content : content
        });

        google.maps.event.addListener(marker, 'click', 
            function(event)
            {
                map.panTo(event.latLng);
                map.setZoom(5);
                infoWindows[this.infoWindowIndex].open(map, this);
            }
        );

        infoWindows.push(infoWindow);
        markers.push(marker);
    }