Javascript以一种奇怪的方式运行

Question

抱歉标题很糟糕，但我不知道该用哪种方式表达，因为我根本不知道发生了什么。

所以我有一个脚本应该每隔 X 秒清除谷歌地图地图中的所有标记，然后使用 Ajax 调用 PHP 脚本从数据库中获取所有地址，之后使用谷歌的地理编码器获取纬度这些地址的经度和经度，并将它们推送到一组标记，最后在地图上设置标记。这里的问题是它只加载了一个标记。

javascript：

var lisbon = {lat: 38.736946, lng: -9.142685};
var geocoder = new google.maps.Geocoder();
var markers = [];

var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: lisbon
});


window.setInterval(function name() {

$.ajax({
    url: "/resources/scripts/php/conn/ajax/getEmployeeMap.php",
    type: "GET",
    dataType: 'json',
    cache: false,
    success: function (response) {
        console.info("===Restarting markers array===");
        markers = [];
        console.info("===Setting markers array===");
        var data = response;
        var i = 1;
        while (i <= Object.keys(data).length) {
            geocoder.geocode({'address': data[i]}, function (results, status) {
                if (status == 'OK') {
                    var geomarker = results[0].geometry.location;
                    var marker = new google.maps.Marker({
                       position: geomarker
                    });
                    markers.push(marker);
                }
            });
            i++;
        }
        window.setInterval(function () {
            console.info("===Deleting markers from the Map===")
            clearMarkers();
            setMapOnAll(map);
        }, 10000)
    }
});
}, 10000);

// Sets the map on all markers in the array.
function setMapOnAll(map) {
    console.info("===Setting markers on the map===");
    for (var i = 1; i < markers.length; i++) {
        markers[i].setMap(map);
    }
}

function clearMarkers() {
    setMapOnAll(null);
}

在控制台上输出：

===重启标记数组===

===设置标记数组===

===重启标记数组===

===设置标记数组===

===从地图中删除标记===

===在地图上设置标记===

===在地图上设置标记===

来自 PHP 的 JSON：

{"1":"Lisboa, Sintra, Rua Professor Rui Luis Gomes 19, 2725-555","2":"Lisboa, Sintra, Rua Professor Rui Luis Gomes 21, 2725-555"}

其他奇怪的事情是，如果我在 ajax 完成运行和设置数组之前调用“setMapOnAll()”而没有运行间隔。

当我只使用标记设置器运行脚本时，它确实放置了 2 个标记，所以我知道它正在工作。

==更新==

新代码，现在正在运行，供将来参考（我自己和其他可能需要它的人）：

var lisbon = {lat: 38.736946, lng: -9.142685};
var geocoder = new google.maps.Geocoder();
var markers = [];

var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: lisbon
});

function doMarkers() {
    $.ajax({
        url: "/resources/scripts/php/conn/ajax/getEmployeeMap.php",
        type: "GET",
        dataType: 'json',
        cache: false,
        success: function (response) {
            clearMarkers();
            var data = response;
            var i = 1;
            while (i <= Object.keys(data).length) {
                geocoder.geocode({'address': data[i]}, function (results, status) {
                    if (status == 'OK') {
                        var geomarker = results[0].geometry.location;
                        var marker = new google.maps.Marker({
                            position: geomarker
                        });
                        marker.setMap(map);
                        markers.push(marker);
                    }
                });
                i++;
            }
        }
    });
}

// Sets the map on all markers in the array.
function setMapOnAll(map) {
    for (var i = 0; i < markers.length; i++) {
        markers[i].setMap(map);
    }
}

function clearMarkers() {
    setMapOnAll(null);
    markers.length = 0; //Deletes content from array.
    //This line deleted the array even when setting the markers...
}

doMarkers();
setInterval(doMarkers, 10000);

这是在@TonySamperi 和@James 的帮助下重新制作的

Answer 1

原因是这个函数是异步的！

 geocoder.geocode({'address': data[i]}, function (results, status) {

您可以传递一个变量以了解它是最后一次迭代的时间，然后初始化地图上的标记

var doGeocode = function(address, last){

    geocoder.geocode({'address': data[i]}, function (results, status) {
         if (status == 'OK') {
                var geomarker = results[0].geometry.location;
                var marker = new google.maps.Marker({
                   position: geomarker
                });
                markers.push(marker);
          }
         if(last){
            setMapOnAll(map);
         }
     });

}

var getAddresses = function(){
    $.ajax({
        url: "/resources/scripts/php/conn/ajax/getEmployeeMap.php",
        type: "GET",
        dataType: 'json',
        cache: false,
        success: function (response) {
            console.info("===Restarting markers array===");
            markers = [];
            console.info("===Setting markers array===");
            var data = response;
            var i = 1;
            var count = Object.keys(data).length;
            while (i <= count) {
                doGeoCode(data[i], i == count)
                i++;
           }
            setTimeout(function () {
                console.info("===Deleting markers from the Map===")
                clearMarkers();
                getAddresses(); //auto-call
            }, 5000)
    }
});

getAddresses(); //call manually the first time

对于将来可能会阅读此内容的任何人来说，setInterval 并不是重点。

Answer 2

如 cmets 中所述，如果您只是在收到地图时在地图上设置每个标记，则可以消除其中一个 setInterval 调用。您确实需要更改删除地图标记的位置，因此我将其放在 AJAX 成功函数的开头。

var lisbon = {lat: 38.736946, lng: -9.142685};
var geocoder = new google.maps.Geocoder();
var markers = [];

var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: lisbon
});


window.setInterval(function name() {

$.ajax({
    url: "/resources/scripts/php/conn/ajax/getEmployeeMap.php",
    type: "GET",
    dataType: 'json',
    cache: false,
    success: function (response) {
        console.info("===Deleting markers from the Map===")
        clearMarkers();
        console.info("===Restarting markers array===");
        markers = [];
        console.info("===Setting markers array===");
        var data = response;
        var i = 1;
        while (i <= Object.keys(data).length) {
            geocoder.geocode({'address': data[i]}, function (results, status) {
                if (status == 'OK') {
                    var geomarker = results[0].geometry.location;
                    var marker = new google.maps.Marker({
                       position: geomarker
                    });
                    marker.setMap(map);
                    markers.push(marker);
                }
            });
            i++;
        }
    }
});
}, 10000);

function clearMarkers() {
    for (var i = 1; i < markers.length; i++) {
        markers[i].setMap(null);
    }   
}