在Google Maps API中爲多個標記添加監聽器事件

Question

我在Rails中使用Google Maps API。從ajax調用我的所有位置並在for循環中顯示它。我跟着這link當我複製粘貼這個 代碼在我的文件，它似乎工作完美。但是當我試圖爲我的代碼做同樣的事情時。它一直顯示最後的標記信息。

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,...部分：概念

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>

的

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

證明我希望這有助於！