마커 업데이트 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()를 호출하지 마십시오. 사용자가지도와 상호 작용할 때 호출합니다. 구글 맵 라이브러리는 이것에 대한 매우 유용한 이벤트 리스너를 제공하십시오 updateMarkers가 존재하는 기능에 대한

google.maps.event.addListener(map, 'idle', 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); 
    } 
}