0
對不起，我的英語不好。 我正在尋找解決方案來跟蹤谷歌地圖上的路線，當用戶移動並通過TTS谷歌地圖指令讀取時，逐步顯示街道名稱..（如GPS） 我希望在用戶接近前一個時間時顯示以下指令指令 我watchPosition函數調用geolocationSuccess功能每一個動作，這不是一個很好的解決方案顯示一步一步Google地圖方向
在我的例子，我從我的地理位置奧馬哈海灘博物館法國諾曼底
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Geolocation and Google Maps API</title>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
\t <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
\t
\t
function geolocationSuccess(position) {
\t \t var destination="49.366973,-0.882042";
var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var myOptions = {
zoom : 16,
center : userLatLng,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var mapObject = new google.maps.Map(document.getElementById("map"), myOptions);
// Place the marker
new google.maps.Marker({
map: mapObject,
position: userLatLng
});
\t \t
\t \t direction = new google.maps.DirectionsRenderer({
map : mapObject,
\t suppressMarkers : true
// panel : panel // Dom element pour afficher les instructions d'itinéraire
});
if(userLatLng && destination){
var request = {
origin : userLatLng,
destination : destination,
travelMode : google.maps.DirectionsTravelMode.DRIVING // Mode de conduite
}
var directionsService = new google.maps.DirectionsService(); // Service de calcul d'itinéraire
directionsService.route(request, function(response, status){ // Envoie de la requête pour calculer le parcours
if(status == google.maps.DirectionsStatus.OK){
direction.setDirections(response); // Trace l'itinéraire sur la carte et les différentes étapes du parcours
}
\t \t \t var myRoute = response.routes[0].legs[0];
\t \t \t for (var i = 0; i < myRoute.steps.length; i++) {
\t \t \t console.log(myRoute.steps[i].instructions+' -> '+myRoute.steps[i].distance.value);
\t \t }
\t \t \t console.log(myRoute.steps[0].instructions)
\t \t \t $("#route").html('Dans '+myRoute.steps[0].distance.value+' m '+myRoute.steps[0].instructions);
\t \t \t readbyTTS(myRoute.steps[0].instructions);
\t \t \t var follow = navigator.geolocation.watchPosition(function(position) {
\t \t \t \t \t \t \t \t \t
\t \t \t \t geolocationSuccess(position);
\t \t \t });
\t \t
});
}
}
function geolocationError(positionError) {
document.getElementById("error").innerHTML += "Error: " + positionError.message + "<br />";
}
function geolocateUser() {
// If the browser supports the Geolocation API
if (navigator.geolocation)
{
var positionOptions = {
enableHighAccuracy: true,
timeout: 10 * 1000 // 10 seconds
};
navigator.geolocation.getCurrentPosition(geolocationSuccess, geolocationError, positionOptions);
}
else
document.getElementById("error").innerHTML += "Your browser doesn't support the Geolocation API";
}
window.onload = geolocateUser;
</script>
<style type="text/css">
#map {
width: 800px;
height: 600px;
}
</style>
</head>
<body>
<h1></h1>
<div id="map"></div>
<p><span id="route"></span></p>
<p id="error"></p>
</body>
</html>感謝您的幫助 KILROY