使用 JQuery 更新标记 Google Maps API答案

【问题标题】：Update markers Google Maps API with JQuery使用 JQuery 更新标记 Google Maps API
【发布时间】：2017-06-28 04:23:54
【问题描述】：

我在更新 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>

【问题讨论】：

为什么每 5 秒更新一次标记？

标签： jquery ajax google-maps google-maps-markers

【解决方案1】：

首先，不要每 5 秒调用一次 updateMarkers()。当用户与地图交互时调用它。 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);
    }
}

【讨论】：