如何在 JS 中獲取用戶的位置，然后將響應作為坐標傳遞給 Google 地圖？

Question

我正在嘗試使用地理定位成功獲取 JS 中的用戶位置，並且 2 個日志語句打印出坐標。 如何將 startPos 傳入 Google 地圖功能？

錯誤：

未捕獲（承諾）類型錯誤：無法讀取未定義的屬性“坐標”

在 initMap (dashboard.js:20)

謝謝！

代碼：

var startPos;

window.onload = function() {
    var geoSuccess = function(position) {
        startPos = position;
        //document.getElementById('startLat').innerHTML = startPos.coords.latitude;
        console.log(startPos.coords.latitude);
        //document.getElementById('startLon').innerHTML = startPos.coords.longitude;
        console.log(startPos.coords.longitude);
    };
    navigator.geolocation.getCurrentPosition(geoSuccess);
    return startPos;

    // Initialize and add the map

};
function initMap() {
    // The location of user

    var lat = startPos.coords.latitude;
    var long = startPos.coords.longitude;

    const userLocation = { lat: lat, lng: long };
    // The map, centered at Uluru
    const map = new google.maps.Map(document.getElementById("map"), {
        zoom: 4,
        center: userLocation,
    });
    // The marker, positioned at Uluru
    const marker = new google.maps.Marker({
        position: userLocation,
        map: map,
    });
}

initMap(startPos);

Answer 1

initMap 訪問未定義的 startPos 的原因是它在 onload 事件開始之前執行，並且在位置數據到達調用 geoSuccess 回調之前。

所以它應該看起來更像：

var startPos;

window.onload = function() {
    var geoSuccess = function(position) {
        startPos = position;
        //document.getElementById('startLat').innerHTML = startPos.coords.latitude;
        console.log(startPos.coords.latitude);
        //document.getElementById('startLon').innerHTML = startPos.coords.longitude;
        console.log(startPos.coords.longitude);

        initMap(); // Call it here!
    };
    navigator.geolocation.getCurrentPosition(geoSuccess);
};
function initMap() {
    // The location of user

    var lat = startPos.coords.latitude;
    var long = startPos.coords.longitude;

    const userLocation = { lat: lat, lng: long };
    // The map, centered at Uluru
    const map = new google.maps.Map(document.getElementById("map"), {
        zoom: 4,
        center: userLocation,
    });
    // The marker, positioned at Uluru
    const marker = new google.maps.Marker({
        position: userLocation,
        map: map,
    });
}