2016-04-19 25 views
0

私の悪い英語を申し訳ありません。 私はGoogleマップ上のルートをトレースするソリューションを探して、ユーザーが移動してTTS googleマップの指示(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>

を私のジオロケーションからのルートをトレース

あなたはGoogle Maps Directions APIを使用しようとすることができ、あなたの助け キルロイ

答えて

1

ためのおかげで、それは、HTTPリクエストを使用して位置の間の方向を計算するサービスです。

このサービスは一般に、地図上にアプリケーションコンテンツを配置するための静的(事前に知られている)アドレスの方向を計算するために設計されています。このサービスは、ユーザー入力にリアルタイムで応答するようには設計されていません。

詳細はSO questionをご確認ください。

関連する問題