谷歌地圖addListener只加載一個標記關閉問題

Question

我想加載谷歌地圖標記，當我移動視口，但只有最後添加的標記加載。我認爲它是一個關閉問題。這是我的代碼部分：

function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
     center: new google.maps.LatLng(42.271084, -83.737277), 
     zoom: 16 
    }); 
    downloadUrl('/data', function(results) { 
     var resultsJSON = JSON.parse(results.responseText).data; 
     for (var i = 0; i < resultsJSON.length; i++) { 
     var lat = resultsJSON[i].lat; 
     var lng = resultsJSON[i].lng; 
     var latLng = new google.maps.LatLng(lat, lng); 
     var marker = new google.maps.Marker({ 
     position: latLng, 
     map: map, 
     category:year, 
     icon: icon.style, 
     scale: 2 
     }); 

     if(map.getBounds().contains(marker.getPosition())) { 
     marker.setMap(map); 
     } 
     else { 
     marker.setMap(null); 
     } 
     google.maps.event.addListener(map, "idle", function() {loadMarker(map, marker)}); 
    } 
    }); 
    } 
function downloadUrl(url, callback) { 
    #ajax call 
    } 
    function loadMarker(map, marker) { 
     if(map.getBounds().contains(marker.getPosition())) { 
     marker.setMap(map); 
     console.log("Hello world"); 
     } 
     else { 
     marker.setMap(null); 
     } 
    } 

Answer 1

你內部循環

google.maps.event.addListener(map, "idle", function() {loadMarker(map, marker)}); 

使用此命令在循環的每次迭代中，您嘗試添加到事件「空閒」的匿名函數。而且在每次交易中，您都可以用新數據重新編寫此功能。結果是在上次交易中，您最後添加的標記正在加載。您應該創建一個標記數組並在循環結束後傳遞它們。類似這樣的：

downloadUrl('/data', function(results) { 
     var resultsJSON = JSON.parse(results.responseText).data; 
     var markers = []; 
     for (var i = 0; i < resultsJSON.length; i++) { 
     var lat = resultsJSON[i].lat; 
     var lng = resultsJSON[i].lng; 
     var latLng = new google.maps.LatLng(lat, lng); 
     var marker = new google.maps.Marker({ 
     position: latLng, 
     map: map, 
     category:year, 
     icon: icon.style, 
     scale: 2 
     }); 
     markers[i] = marker; 
    } 
    loadMarker(map, markers); 
    google.maps.event.addListener(map, "idle", function() {loadMarker(map, markers)}); 
    }); 

function loadMarker(map, markers) { 
     for (var i = 0; i < markers.length; i++) { 
     if(map.getBounds().contains(markers[i].getPosition())) { 
     markers[i].setMap(map); 
     console.log("Hello world"); 
     } 
     else { 
     markers[i].setMap(null); 
     } 
    } 
    }