Обновление маркеров API Карт Google с помощью JQuery

Question

У меня возникли проблемы с кодом для обновления маркеров в API карт Google. У меня есть функция $.ajax, которая загружает данные. Затем я инициализирую карту initMap() и перебираю данные, полученные от $.ajax. Я создаю маркеры, вставляю их в массив Markers. Маркеры успешно отображаются на карте. Затем мне нужно обновлять маркеры каждые 5 секунд. Поэтому я определил новую функцию setInterval, которая будет запускать функцию updateMarkers Функция updateMarkers удаляет маркеры с карты и устанавливает массив маркеров в пустой массив. Затем я вызываю снова функцию $ .ajax (я получаю ошибку «undefined» - я думаю, из-за области). Затем я запускаю функцию 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

Прежде всего, не вызывайте updateMarkers(), используя каждые 5 секунд. Вызовите его, когда пользователь взаимодействует с картой. Google карты библиотека предлагает очень полезный слушатель событий для этого:

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

Во-вторых, я не вижу причин для в updateMarkers функционировать существовать. Просто добавьте что-то в функцию Markers, чтобы очистить карту и массив до добавления новых.

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); 
    } 
}