<!DOCTYPE html>
<html>
<head>
<title>Google Map</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<style>
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script>
function initMap() {
const directionsRenderer = new google.maps.DirectionsRenderer();
const directionsService = new google.maps.DirectionsService();
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 14,
center: { lat: 20.5937, lng: 78.9629 },
});
directionsRenderer.setMap(map);
calculateAndDisplayRoute(directionsService, directionsRenderer);
}
function calculateAndDisplayRoute(directionsService, directionsRenderer) {
const success = (position) => {
var la = position.coords.latitude;
var lo = position.coords.longitude;
var latt = document.getElementById('latt').value;
var lngg = document.getElementById('lngg').value;
console.log(latt);
console.log(lngg);
directionsService.route({
origin: { lat: la, lng: lo},
destination: { lat: latt, lng: lngg },
travelMode: google.maps.TravelMode.DRIVING,
})
.then((response) => {
directionsRenderer.setDirections(response);
})
.catch((e) => window.alert("Directions request failed due to " + status));
}
const error = (error) => {
console.log(error)
}
navigator.geolocation.getCurrentPosition(success, error);
}
</script>
</head>
<body >
<div id="map" ></div>
<input type="hidden" id="latt" value="{{lat}}">
<input type="hidden" id="lngg" value="{{lng}}">
<script src="https://maps.googleapis.com/maps/api/js?key=[API KEY HERE ] & c allback = initMap
&libraries=&v=weekly" async></script>
</body>
</html>
在目的地，当我给纬度和经度，然后这段代码完美地工作，但当我给纬度和经度使用变量，然后它显示错误方向请求失败，由于不能返回任何状态，我使用django框架为我的项目和获取纬度和经度从数据库。
需要将latt和long转换为数字例子:
var latt = document.getElementById('latt').value;
var lngg = document.getElementById('lngg').value;
var a = Number(latt);
var b = Number(lngg);
directionsService.route({
origin: { lat: la, lng: lo},
destination: { lat: a, lng: b },
travelMode: google.maps.TravelMode.DRIVING,
})