0
Ich habe versucht, diese zu kombinieren Links miteinander „https://developers.google.com/maps/documentation/javascript/geolocation“ und „https://developers.google.com/maps/documentation/javascript/examples/directions-panel“ , aber es gibt ein Problem mit zusammen Kombination von Benutzern aktuelle Position schieben zu eine innere html von „div“ und bekommt es dannlet Benutzer get Richtung zu bestimmtem Ort von seinem Standort in meiner Website
<script>
var infoWindow;
function initMap() {
var directionsDisplay = new google.maps.DirectionsRenderer;
var directionsService = new google.maps.DirectionsService;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 18,
center: { lat: 30.0879217, lng: 31.3439407 }
});
infoWindow = new google.maps.InfoWindow;
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
document.getElementById("position1").innerHTML=position.coords.latitude;
document.getElementById("position2").innerHTML=position.coords.longitude;
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('Location found.');
infoWindow.open(map);
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
}
directionsDisplay.setMap(map);
calculateAndDisplayRoute(directionsService, directionsDisplay);
document.getElementById('mode').addEventListener('change', function() {
calculateAndDisplayRoute(directionsService, directionsDisplay);
});
}
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
var selectedMode = document.getElementById('mode').value;
var x=document.getElementById("position1").innerHTML;
var y=document.getElementById("position2").innerHTML;
directionsService.route({
origin: { lat: 30.0879217, lng: 31.3439407 }, // Haight.
destination: { lat: Number(x), lng: Number(y) }, // Ocean Beach.
// Note that Javascript allows us to access the constant
// using square brackets and a string value as its
// "property."
travelMode: google.maps.TravelMode[selectedMode]
}, function (response, status) {
if (status == 'OK') {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCb0QRzb5LcbAkUbRH3kRDv4WNVDRMBeq4&callback=initMap">
</script><!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Travel modes in directions</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto', 'sans-serif';
line-height: 30px;
padding-left: 10px;
}
</style>
</head>
<body>
<div id="position1" ></div>
<div id="position2"></div>
<div id="floating-panel">
<b>Mode of Travel: </b>
<select id="mode">
<option value="DRIVING">Driving</option>
<option value="WALKING">Walking</option>
<option value="BICYCLING">Bicycling</option>
<option value="TRANSIT">Transit</option>
</select>
</div>
<div id="map"></div>
Die Geolocation-Funktion ist asynchron. Sie müssen die Ergebnisse in der Callback-Funktion verwenden, wenn/wo sie verfügbar ist (wenn sie zu spät gespeichert werden, sind die Ergebnisse für den Anruf beim Routenplanerdienst nicht verfügbar). – geocodezip