使用JQuery更新標記Google Maps API

Question

我在更新Google Map API中的標記時遇到了問題。我有$.ajax下載數據的功能。然後我初始化地圖initMap()，並重復從$.ajax收到的數據。我創建標記，將它們推入數組Markers。標記成功顯示在地圖上。然後我需要每5秒更新一次標記。所以我定義了一個新函數setInterval，它將運行一個函數updateMarkers函數updateMarkers從映射中刪除標記並將標記數組設置爲空數組。然後我再次調用$ .ajax函數（我得到的錯誤'未定義 - 我猜是因爲範圍）。然後我運行功能Markers(Data)。我試圖多次重構代碼。我可以從數組中刪除和刪除標記。然後我得到無限循環下載數據並將它們推入陣列，並且我的瀏覽器凍結。有人能幫我解決下面的代碼嗎？我真的很感激！

var map; 
var marker; 
var markers = []; 
var locations = []; 


$(function downloadJSON() { 
    type: 'GET', 
    $.ajax({ 
     url: 'url....', 
     dataType: 'json', 
     contentType: "application/json;charset=utf-8", 
     success: Markers 
    }); 
}); 

function Markers(data) { 

    for (var i = 0; i < data.length; i++) { 
     var position = data[i].location; 
     var title = data[i].title; 
     marker = new google.maps.Marker({ 
      map: map, 
      position: position, 
      title: title, 
      id: i 
     }); 
     markers.push(marker); 
     } 
} 

function initMap() { 
      map = new google.maps.Map(document.getElementById('map'), { 
        center: new google.maps.LatLng(10,-10), 
        zoom: 15 
       }); 

setInterval(function() { 
     updateMarkers(); 
    }, 5000); 

function updateMarkers() { 

    downloadJSON(); 

    //remove markers from the map and delete array markers: 
    for (var i = 0; i < markers.length; i++) { 
    markers[i].setMap(null); 
    markers = []; 
    } 

Markers(data); 

} 

<script async defer 
src="https://maps.googleapis.com/maps/api/js?key=APIKEY&v=3&callback=initMap"> 
</script> 

Answer 1

首先不要每5秒鐘調用updateMarkers（）。當用戶與地圖交互時調用它。谷歌地圖庫提供了一個非常有用的事件監聽器：

google.maps.event.addListener(map, 'idle', updateMarkers); 

其次，我看不到updateMarkers函數存在的原因。只需添加一些標記功能來清除地圖和數組，然後再添加新的地圖。

function Markers(data) { 
    // clear map 
    for (var i = 0; i < markers.length; i++) { 
     markers[i].setMap(null); 
    } 
    // clear array 
    markers = []; 
    for (var i = 0; i < data.length; i++) { 
     var position = data[i].location; 
     var title = data[i].title; 
     marker = new google.maps.Marker({ 
      map: map, 
      position: position, 
      title: title, 
      id: i 
     }); 
     markers.push(marker); 
    } 
}