让谷歌地图回调等待其余函数完成

Question

我对谷歌称呼其地图API的方式有困难。我有以下调用初始化映射

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

但在 initMap 中，以下条件if(getPosition() !== false) {永远不会计算为 true，因为 init map 是在 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>

Answer 1

删除在

地图 API 中加载的位置的callback=initMap。

相反，只从您所在的位置调用 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;
}