javascript - Display step by step Google map Direction -
sorry bad english. looking solution trace route on google map, display progressively street names when user move , read tts google map instructions.. (like gps) wish display following instruction when user approaches previous instruction watchposition function call geolocationsuccess function each movement, not solution
in example trace route geolocation omaha beach museum normandy france
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>geolocation , google maps api</title> <script src="http://maps.google.com/maps/api/js?sensor=true"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script> function geolocationsuccess(position) { 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 marker new google.maps.marker({ map: mapobject, position: userlatlng }); direction = new google.maps.directionsrenderer({ map : mapobject, 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 } var myroute = response.routes[0].legs[0]; for (var = 0; < myroute.steps.length; i++) { console.log(myroute.steps[i].instructions+' -> '+myroute.steps[i].distance.value); } console.log(myroute.steps[0].instructions) $("#route").html('dans '+myroute.steps[0].distance.value+' m '+myroute.steps[0].instructions); readbytts(myroute.steps[0].instructions); var follow = navigator.geolocation.watchposition(function(position) { geolocationsuccess(position); }); }); } } function geolocationerror(positionerror) { document.getelementbyid("error").innerhtml += "error: " + positionerror.message + "<br />"; } function geolocateuser() { // if browser supports 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 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>thanks kilroy
you can try use google maps directions api, service calculates directions between locations using http request.
this service designed calculating directions static (known in advance) addresses placement of application content on map; service not designed respond in real time user input.
check so question more information.
Comments
Post a Comment