javascript - 使Google Maps回调等待其余功能完成

我在Google调用其地图api的方式时遇到困难。我有以下调用initMap

<script defer
src="https://maps.googleapis.com/maps/api/js?key=API_KEY_REMOVED&callback=initMap">
</script>

但是在initMap中，以下条件if(getPosition() !== false) {永远不会求值为true，因为init映射是在getPosition（）设置其对象值之前完成的。

function initMap() {
    // set new map, assign default properties
    map = new google.maps.Map(document.getElementById('map'), {
        center: { lat, lng }, zoom: 14
    });
    // check if the requested data is usable (lat, lng === numbers) before trying to use it
    if(getPosition() !== false) {
        map.setCenter( getPosition() ); // set latest position as the map center
        addMarker();
        console.log("InitMap ran here");
    }
}

我怎样才能使initMap一直等到getPosition（）有机会等待其他函数完成任务？这是我完整的脚本，因此更有意义。

<script>

console.log(formatTime(Date()));

// https://developers.google.com/maps/documentation/javascript/geolocation
var map; var marker;
var lat = 65.025984; var lng = 25.470794; // default map location in case no position response is available
var res_data; var res_longitude; var res_latitude; var res_speed; var res_time; // res = response (data from the ajax call)
var xhr = new XMLHttpRequest();

function getPosition() {
    pos = {
        lat: res_latitude,
        lng: res_longitude,
    };
    return ( isNaN(pos.lat) || isNaN(pos.lng) ) ? false : pos; // return pos only if lat and lng values are numbers
}

function initMap() {
    // set new map, assign default properties
    map = new google.maps.Map(document.getElementById('map'), {
        center: { lat, lng }, zoom: 14
    });
    // check if the requested data is usable (lat, lng === numbers) before trying to use it
    if(getPosition() !== false) {
        map.setCenter( getPosition() ); // set latest position as the map center
        addMarker();
        console.log("InitMap ran here");
    }
}

// place marker on the map
function addMarker() {
    //console.log("Add Marker ran");
    //https://developers.google.com/maps/documentation/javascript/markers
    if(marker){ marker.setMap(null); } // remove visibility of current marker
    marker = new google.maps.Marker({
        position: getPosition(),
        map: map,
        title: formatTime(res_time),
    });
    marker.setMap(map); // set the marker
}

function getData() {
    xhr.addEventListener("load", reqListener);
    xhr.open("GET", "http://example.com/data.txt");
    xhr.send();
}

function reqListener() {
    // res_data = long, lat, accuracy, speed, time
    //console.log("reqListener: " + xhr.responseText);
    res_data = '[' + xhr.responseText + ']';
    res_data = JSON.parse(res_data);
    res_latitude = res_data[0]; res_longitude = res_data[1]; res_accuracy = res_data[2]; res_speed = res_data[3]; res_time = res_data[4];
    var formatted_time = formatTime(res_time);

    document.getElementById('info').innerHTML = '<span class="info">Lat: ' + res_latitude + '</span><span class="info">Long: ' + res_longitude + '</span><span class="info">Accuracy: ' + res_accuracy + '</span><span class="info">Speed: ' + res_speed + '</span><span class="info">' + formatted_time + '</span>';

    addMarker();
}

function formatTime(time) {
    var t = new Date(time);
    var hours, mins, secs;
    if(t.getHours() < 10) { hours = "0" + t.getHours(); } else { hours = t.getHours(); }
    if(t.getMinutes() < 10) { mins = "0" + t.getMinutes(); } else { mins = t.getMinutes(); }
    if(t.getSeconds() < 10) { secs = "0" + t.getSeconds(); } else { secs = t.getSeconds(); }
    var hms = hours +':'+ mins +':'+ secs;
    return 'Updated: ' + hms;
}

function init() {
    getData();
    setInterval(getData, 5000);
}

init();

</script>

<script defer
    src="https://maps.googleapis.com/maps/api/js?key=API_KEY_REMOVED&callback=initMap">
</script>

最佳答案

摆脱callback=initMap从您在Maps API中加载的位置。

而是仅在确定所有内容都已加载的地方调用initMap。例如在reqListener的末尾。

function reqListener() {
    res_data = '[' + xhr.responseText + ']';
    res_data = JSON.parse(res_data);
    res_latitude = res_data[0]; res_longitude = res_data[1]; res_accuracy = res_data[2]; res_speed = res_data[3]; res_time = res_data[4];
    var formatted_time = formatTime(res_time);

    document.getElementById('info').innerHTML = '<span class="info">Lat: ' + res_latitude + '</span><span class="info">Long: ' + res_longitude + '</span><span class="info">Accuracy: ' + res_accuracy + '</span><span class="info">Speed: ' + res_speed + '</span><span class="info">' + formatted_time + '</span>';

    initMap();
    addMarker();
}

如果您要重复调用reqListener并且不想重新创建地图，请在initMap的顶部添加一些逻辑，例如：

if (map !== null) {
  return;
}