个人中心
gpt4 book ai didi

javascript - 显示逐步谷歌地图方向

转载 作者：行者123 更新时间：2023-12-03 07:08:25 25 4
gpt4 key购买 nike

抱歉我的英语不好。我正在寻找一种解决方案来在谷歌地图上追踪路线，当用户移动并通过 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>

感谢您的帮助基尔罗伊

最佳答案

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

此服务通常设计用于计算静态(预先已知)地址的方向，以便在 map 上放置应用程序内容；该服务并非旨在实时响应用户输入。

检查这个SO question了解更多信息。

关于javascript - 显示逐步谷歌地图方向，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36713020/

25 4 0
文章推荐： javascript - PhpStorm HTML 检查问题
文章推荐： c++ - C++构造函数调用
文章推荐： twitter-bootstrap - Bootstrap 3.3 Internet Explorer 10 字形未显示
文章推荐： c++ - begin()和data()有什么区别
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com