在Google Maps API中為多個標記添加偵聽器事件

Question

我在Rails中使用Google Maps API。 從ajax調用獲取我的所有位置，並將其顯示在for循環中。 我點擊了此鏈接，當我復制粘貼此代碼到我的文件中時，它似乎運行良好。 但是，當我嘗試為我的代碼做同樣的事情時。 它一直顯示最后的標記信息。

jQuery(function($) {
var myCenter = new google.maps.LatLng(51.508742,-0.120850);
var mapCanvas = document.getElementById("map");
var mapOptions = {center: myCenter, zoom: 5};
var map = new google.maps.Map(mapCanvas, mapOptions);

$.ajax({
 url: "/list_proposals",
  type: "GET",
  dataType: "json",
  success:function(data) {
    placeMarker(map, data);
  }
});

function placeMarker(map, data){

  for (var i = 0; i < data.length; i++) {
    var location_data = data[i];
    var lat = location_data["lat"];
    var long = location_data["long"];
    var planting_proposal = location_data["planting_proposal"];
    var proposal_id = planting_proposal["id"];
    var title = planting_proposal["title"];
    var photo_url = planting_proposal["main_photo"]["attachment_thumb_url"];

    latlngset = new google.maps.LatLng(lat, long);
    var image = {
      url: window.location.origin + "/" + photo_url,
      size: new google.maps.Size(50, 50),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(0, 32)
    };
     var marker = new google.maps.Marker({
         map: map, title: title , position: latlngset, icon: image
     });
     map.setCenter(marker.getPosition());
     var show_proposal_link = '<a href="/planting_proposals/' + proposal_id + '">' + title + '</a>';
     var contentString =  '<div class="card text-center" style="width: 20rem;">' +
       '<div class="card-block">' +
         '<h4 class="card-title">'+ show_proposal_link + '</h4>' +
         '<p class="card-text">' + '<img src="'+ window.location.origin + "/" + photo_url + '" width="100%;"/>' + '</p>' +
       '</div>' +
     '</div>';

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

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

我是Google Maps API的新手。 請我幫我解決我在做什么錯？

Answer 1

您應該在代碼中正確實現IIFE 。 請使用以下IIFE替換google.maps.event.addListener(marker,...部分代碼）：

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

概念證明

 var map; var locations = [ { planting_proposal: { id: 1, title: "Proposal 1" }, lat: 41.386043, long: 2.14561 }, { planting_proposal: { id: 2, title: "Proposal 2" }, lat: 41.417371, long: 2.172115 }, { planting_proposal: { id: 3, title: "Proposal 3" }, lat: 41.399475, long: 2.184048 } ] function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: {lat: 41.385064, lng: 2.173403}, zoom: 12 }); placeMarker(map, locations); } function placeMarker(map, data){ for (var i = 0; i < data.length; i++) { var location_data = data[i]; var lat = location_data["lat"]; var long = location_data["long"]; var planting_proposal = location_data["planting_proposal"]; var proposal_id = planting_proposal["id"]; var title = planting_proposal["title"]; latlngset = new google.maps.LatLng(lat, long); var marker = new google.maps.Marker({ map: map, title: title , position: latlngset }); var show_proposal_link = '<a href="/planting_proposals/' + proposal_id + '">' + title + '</a>'; var contentString = '<div class="card text-center" style="width: 20rem;">' + '<div class="card-block">' + '<h4 class="card-title">'+ show_proposal_link + '</h4>' + '</div>' + '</div>'; var infowindow = new google.maps.InfoWindow(); (function(marker,content,infowindow) { google.maps.event.addListener(marker,'click', function() { infowindow.setContent(content); infowindow.open(map, marker); }); })(marker,contentString,infowindow); } } 

 #map { height: 100%; } html, body { height: 100%; margin: 0; padding: 0; } 

 <div id="map"></div> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initMap" async defer></script> 

我希望這有幫助！