javascript - Google Map API 创建独特信息窗口时出现问题

Question

也许现在已经晚了，但我在谷歌地图上显示信息窗口时遇到问题。我感兴趣的测试点很少，当我添加标记并单击事件到这些标记时，我总是会弹出位置 5 的窗口。如何正确地将各个信息窗口绑定(bind)到每个标记？我尝试创建信息窗口和标记并将它们存储在pointsOfInterests 数组中，但这似乎没有帮助。

谢谢你，

 var pointsOfInterests = [
    ['Location 1', 43.386815, -79.8142324, 1 , '<div id="content1"><div id="siteNotice1"></div><div id="bodyContent1"><h1 id="firstHeading1" class="firstHeading">l1</h1></div></div>'],
    ['Location 2', 43.367015, -79.8241324, 2 , '<div id="content2"><div id="siteNotice2"></div><div id="bodyContent2"><h1 id="firstHeading2" class="firstHeading">l2</h1></div></div>'],
    ['Location 3', 43.357015, -79.8341324, 3, '<div id="content3"><div id="siteNotice3"></div><div id="bodyContent3"><h1 id="firstHeading3" class="firstHeading">l3</h1></div></div>'],
    ['Location 4', 43.347015, -79.8541324, 4, '<div id="content4"><div id="siteNotice4"></div><div id="bodyContent4"><h1 id="firstHeading4" class="firstHeading">l4</h1></div></div>'],
    ['Location 5', 43.377015, -79.8341324, 5, '<div id="content5"><div id="siteNotice5"></div><div id="bodyContent5"><h1 id="firstHeading5" class="firstHeading">l5</h1></div></div>'],
  ];


 function setMarkers(map) {
    // Adds markers to the map.
    for (var i = 0; i < pointsOfInterests.length; i++) {

     var pointsOfInterest = pointsOfInterests[i];

     var marker = new google.maps.Marker({
        position: {lat: pointsOfInterest[1], lng: pointsOfInterest[2]},
        map: map,
        title: pointsOfInterest[0],
        zIndex: pointsOfInterest[3]
      });

      marker.addListener('click', function() {
         var infoWindow = new google.maps.InfoWindow({
         content: pointsOfInterest[0]
         });

         var pos = {
           lat: pointsOfInterest[1],
           lng: pointsOfInterest[2]
         };

         infoWindow.setPosition(pos);
         infoWindow.open(map, marker);
      });
    }
  }

Answer 1

您必须创建一个闭包，否则，所有监听器都将使用数组中的最后一个值。

var pointsOfInterests = [
['Location 1', 43.386815, -79.8142324, 1 , '<div id="content1"><div id="siteNotice1"></div><div id="bodyContent1"><h1 id="firstHeading1" class="firstHeading">l1</h1></div></div>'],
['Location 2', 43.367015, -79.8241324, 2 , '<div id="content2"><div id="siteNotice2"></div><div id="bodyContent2"><h1 id="firstHeading2" class="firstHeading">l2</h1></div></div>'],
['Location 3', 43.357015, -79.8341324, 3, '<div id="content3"><div id="siteNotice3"></div><div id="bodyContent3"><h1 id="firstHeading3" class="firstHeading">l3</h1></div></div>'],
['Location 4', 43.347015, -79.8541324, 4, '<div id="content4"><div id="siteNotice4"></div><div id="bodyContent4"><h1 id="firstHeading4" class="firstHeading">l4</h1></div></div>'],
['Location 5', 43.377015, -79.8341324, 5, '<div id="content5"><div id="siteNotice5"></div><div id="bodyContent5"><h1 id="firstHeading5" class="firstHeading">l5</h1></div></div>'],
];


function setMarkers(map) {
    // Adds markers to the map.
    for (var i = 0; i < pointsOfInterests.length; i++) {
        (function(index){
            var pointsOfInterest = pointsOfInterests[index];

            var marker = new google.maps.Marker({position: {lat: pointsOfInterest[1], lng: pointsOfInterest[2]},
                            map: map,
                            title: pointsOfInterest[0],
                            zIndex: pointsOfInterest[3]
                         });

             marker.addListener('click', function() {
                var infoWindow = new google.maps.InfoWindow({
                content: pointsOfInterest[0]
             });

                var pos = {
                  lat: pointsOfInterest[1],
                  lng: pointsOfInterest[2]
                };

                infoWindow.setPosition(pos);
                infoWindow.open(map, marker);
             });
         })(i);
    }
}