逐步显示谷歌地图方向

Display step by step Google map Direction

本文关键字：方向谷歌地图显示更新时间：2023-09-26

很抱歉我的英语不好。我正在寻找一种在谷歌地图上追踪路线的解决方案，当用户移动和阅读TTS谷歌地图指令时，逐步显示街道名称。。（像GPS）当用户接近上一条指令时，我希望显示以下指令我的watchPosition函数调用geolocationSuccess函数每次移动，这不是一个好的解决方案

在我的例子中，我追踪了一条从地理位置到奥马哈海滩博物馆诺曼底法国的路线

<!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>
	    <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 the 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 i = 0; i < 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 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

您可以尝试使用Google Maps Directions API，这是一项使用HTTP请求计算位置之间方向的服务。

该服务通常被设计用于计算用于在地图上放置应用程序内容的静态（预先已知）地址的方向；此服务不是为了实时响应用户输入而设计的。

查看此SO问题以了解更多信息。