如何在 JS 中获取用户的位置，然后将响应作为坐标传递给 Google 地图？

Question

I am trying to get the users location in JS using geolocation successfully and the 2 log statements print out the co-ordinates. How do I pass in the startPos into the Google map function?

Error:

Uncaught (in promise) TypeError: Cannot read property 'coords' of undefined

at initMap (dashboard.js:20)

Thanks!

Code:

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

The reason that initMap is accessing an undefined startPos, is that it is being executed before the onload event has started, and before the geoSuccess callback has been called by the arrival of the location data.

So it should look more like:

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