结合谷歌地图 API 与地理定位

Question

I wanted to make it so onload my google maps shows a route from wherever I am (through geolocation) to the destination. I have a snippet where it sets a route between 2 points + 1 snippet where the function grabs my current coordinates.

Issue: I don't understand how I can merge these together to get the desired result.

Here's the code I'm working with. Any help is appreciated. (tho in these demos getting cordinates won't work, it does work in my vsc.

 //To get user coordinates var myLocation = document.getElementById("XYZ"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { myLocation.innerHTML = "Geolocation is not supported by this browser."; } } function showPosition(position) { myLocation.innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude; } // Google Maps var directionsDisplay; var directionsService = new google.maps.DirectionsService(); function initMap() { directionsDisplay = new google.maps.DirectionsRenderer(); var porto = new google.maps.LatLng(41.1579416, -8.6257744); var mapOptions = { zoom: 10, center: porto} var map = new google.maps.Map(document.getElementById('map'), mapOptions); directionsDisplay.setMap(map); calcRoute(map); } function calcRoute(map) { var start = new google.maps.LatLng(41.1579416, -8.327744); var end = new google.maps.LatLng(41.1579416, -8.6257744);//linha = localização no porto var startMark = new google.maps.Marker({ position: start, map: map, title: "start" }); var endMark = new google.maps.Marker({ position: end, map: map, title: "end" }); var request = { origin: start, destination: end, travelMode: 'DRIVING' }; directionsService.route(request, function(response, status) { if (status == 'OK') { directionsDisplay.setDirections(response); } else { alert("directions request failed, status="+status) } }); } google.maps.event.addDomListener(window, "load", initMap);

 <script src="https://maps.googleapis.com/maps/api/js?libraries=places&key="></script> <div id="map"style="height:200px"></div> <button id="XYZ" onclick="getLocation()">gib coordinates</button>

Answer 1

The geolocation service is asynchronous. Call the calcRoute function inside the geolocation callback function, passing in the position returned once it returns the response:

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition, errorHandler);
  } else {
    myLocation.innerHTML = "Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {
  myLocation.innerHTML = "Latitude: " + position.coords.latitude +
    "<br>Longitude: " + position.coords.longitude;
  var currentPosition = {
    lat: position.coords.latitude,
    lng: position.coords.longitude
  };
  calcRoute(map, currentPosition);
}

and for robustness, call it with a default start location (or error message) in the error handler.

function errorHandler(err) {
  console.warn('ERROR(' + err.code + '): ' + err.message);
  var defaultPosition = new google.maps.LatLng(41.1579416, -8.327744);
  calcRoute(map, defaultPosition);
};

live example, with fix for locations in USA

code snippet:

 //To get user coordinates var myLocation = document.getElementById("XYZ"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition, errorHandler); } else { myLocation.innerHTML = "Geolocation is not supported by this browser."; } } function errorHandler(err) { console.warn('ERROR(' + err.code + '): ' + err.message); var defaultPosition = new google.maps.LatLng(41.1579416, -8.327744); calcRoute(map, defaultPosition); }; function showPosition(position) { myLocation.innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude; var currentPosition = { lat: position.coords.latitude, lng: position.coords.longitude }; calcRoute(map, currentPosition); } // Google Maps var directionsDisplay; var directionsService = new google.maps.DirectionsService(); var map; function initMap() { directionsDisplay = new google.maps.DirectionsRenderer(); var porto = new google.maps.LatLng(41.1579416, -8.6257744); var mapOptions = { zoom: 10, center: porto } map = new google.maps.Map(document.getElementById('map'), mapOptions); directionsDisplay.setMap(map); } function calcRoute(map, currentPosition) { var end = new google.maps.LatLng(41.1579416, -8.6257744); //linha = localização no porto var startMark = new google.maps.Marker({ position: currentPosition, map: map, title: "start" }); var endMark = new google.maps.Marker({ position: end, map: map, title: "end" }); var request = { origin: currentPosition, destination: end, travelMode: 'DRIVING' }; directionsService.route(request, function(response, status) { if (status == 'OK') { directionsDisplay.setDirections(response); } else { alert("directions request failed, status=" + status) } }); } google.maps.event.addDomListener(window, "load", initMap);

 #map { height: 90%; } html, body { height: 100%; margin: 0; padding: 0; }

 <script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <div id="map"></div> <button id="XYZ" onclick="getLocation()">get coordinates</button>