將GoogleMapsAPI與地理位置相結合

我想這樣做，所以我的谷歌地圖會顯示從我所在的任何地方（通過地理定位）到目的地的路線。我有一個片段，它在 2 個點 1 個片段之間設定一條路線，該函式在其中獲取我當前的坐標。

問題：我不明白如何將這些合并在一起以獲得所需的結果。

這是我正在使用的代碼。任何幫助表示贊賞。（雖然在這些演示中獲取坐標不起作用，但它在我的 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>

uj5u.com熱心網友回復：

地理位置服務是異步的。呼叫calcRoute地理定位回呼函式中的函式，傳入回傳回應后回傳的位置：

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

并且為了穩健性，在錯誤處理程式中使用默認開始位置（或錯誤訊息）呼叫它。

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

現場示例，修??復了美國的位置

代碼片段：

//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>

標籤：javascript谷歌地图谷歌API

上一篇：GoogleMapStyles找不到停車場

下一篇：如何使用融合位置提供者客戶端的getCurrentLocation？