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地图库为此提供了一个非常有用的事件监听器：

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

使用JQuery更新标记Google Maps API

1 个答案: