从当前位置获取到预定义目标的路线

从当前位置获取到预定义目标的路线

关注
发信
关注(28)粉丝(399)

从当前位置获取到预定义目标的路线（地理位置）

本文介绍了从当前位置获取到预定义目标的路线（地理位置）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

Nog我有以下页面，指向预定义的目的地：



这对以下代码非常有用：

 < body> 
< h3>我的Google地图演示< / h3> 
< div id =map>< / div> 
< script> 
函数initMap（）{
 var directionsDisplay = new google.maps.DirectionsRenderer; 
 var directionsService = new google.maps.DirectionsService; 
 
 var lattp =<？php echo json_encode（$ lattp）;？>; 
 var lngtp =<？php echo json_encode（$ lngtp）;？>; 
 var zoomtp =<？php echo json_encode（$ zoomtp）;？>; 
 var tp = {lat：JSON.parse（lattp），lng：JSON.parse（lngtp）}; 
 
 
 
 var map = new google.maps.Map（document.getElementById（'map'），{
 zoom：JSON.parse（zoomtp），
中心：tp 
}）; 
 directionsDisplay.setMap（map）; 
 
 calculateAndDisplayRoute（directionsService，directionsDisplay）; 
 
 
 $ b if（navigator.geolocation）{
 navigator.geolocation.getCurrentPosition（function（position）{
 var pos = {
 lat：position.coords.latitude，
 lng：position.coords.longitude 
}; 
 
}，function（）{
 handleLocationError（true，markerme） ; 
}）; 
} else {
 //浏览器不支持地理定位
 window.alert（'Geolocation is not supported'）; 
} 
 
函数calculateAndDisplayRoute（directionsService，directionsDisplay）{
 var latrest =<？php echo json_encode（$ latrest）;？>; 
 var lngrest =<？php echo json_encode（$ lngrest）;？>; 
 var rest = {lat：JSON.parse（latrest），lng：JSON.parse（lngrest）}; 
 
 // var selectedMode =WALKING; 
 directionsService.route（{
 origin：{lat：51.203278，lng：2.758969}，//当前位置
 destination：rest，// restaurant。
 //注意Javascript允许我们使用方括号和字符串值作为
 //属性来访问常量
 // 
 travelMode：google.maps.TravelMode.WALKING 
} ，function（response，status）{
 if（status =='OK'）{
 directionsDisplay.setDirections（response）; 
} else {
 window.alert（'Directions请求由于+状态而失败）; 
} 
}）; 
} 
< / script> 
< script async defer 
 src =https://maps.googleapis.com/maps/api/js?key=AIzaSyBWTXOkLL3td_c8oQni-qi74ICSypn7GM8&callback=initMap> 
< / script> 
< / body>

正如您所看到的，我尝试将我当前的位置作为原点。
我已经试图获得变量 pos 作为原点，但这不起作用...
即使Google指南对我也不清楚。感谢您的帮助！

解决方案

您当前的位置是声明在另一个函数中，所以它对其他函数基本上是不可见的。 

  navigator.geolocation.getCurrentPosition（function（position）{
 var pos = {
 lat：position.coords.latitude，
 lng：position.coords.longitude 
}; 
 
}，function（）{ 
 handleLocationError（true，markerme）; 
}）;

我建议您计算您在 initMap 然后将当前位置作为参数传递给 calculateAndDisplayRoute 。

 函数initMap（）{
 ... 
 var map = new google.maps.Map（document.getElementById（'map'），{
 zoom：JSON.parse（zoomtp），
中心：tp 
}）; 
 directionsDisplay.setMap（map）; 
 
 if（navigator.geolocation）{
 navigator.geolocation.getCurrentPosition（function（position）{
 var pos = {
 lat：position.coords.latitude， 
 lng：position.coords.longitude 
}; 
 calculateAndDisplayRoute（directionsService，directionsDisplay，pos）; 
 
}，function（）{
 handleLocationError（ true，markerme）; 
}）; 
} else {
 //浏览器不支持地理定位
 window.alert（'Geolocation is not supported'）; 
 
 
 
 
 $ b函数calculateAndDisplayRoute（directionsService，directionsDisplay，pos）{
 var latrest =<？php echo json_encode（ $ latrest）;取代; 
 var lngrest =<？php echo json_encode（$ lngrest）;？>; 
 var rest = {lat：JSON.parse（latrest），lng：JSON.parse（lngrest）}; 
 
 // var selectedMode =WALKING; 
 directionsService.route（{
 origin：pos，//当前位置
 destination：rest，// restaurant。
 //注意Javascript允许我们访问常量
 //使用方括号和字符串值作为它的
 //property。
 travelMode：google.maps.TravelMode.WALKING 
}，function（response，status）{ 
 if（status =='OK'）{
 directionsDisplay.setDirections（response）; 
} else {
 window.alert（'由于'+状态导致请求失败） ; 
} 
}）; 
}


Nog I have following page with directions to the predefined destination:example directions

This is working perfect with following code:

    <body>
    <h3>My Google Maps Demo</h3>
    <div id="map"></div>
    <script>
      function initMap() {
        var directionsDisplay = new google.maps.DirectionsRenderer;
        var directionsService = new google.maps.DirectionsService;

        var lattp = <?php echo json_encode($lattp);?>;
        var lngtp = <?php echo json_encode($lngtp);?>;
        var zoomtp = <?php echo json_encode($zoomtp);?>;
        var tp = {lat: JSON.parse(lattp), lng: JSON.parse(lngtp)};



        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: JSON.parse(zoomtp),
          center: tp
        });
        directionsDisplay.setMap(map);

        calculateAndDisplayRoute(directionsService, directionsDisplay);

      }

      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
          var pos = {
            lat: position.coords.latitude,
            lng: position.coords.longitude
          };

        }, function() {
          handleLocationError(true, markerme);
        });
     } else {
      // Browser doesn't support Geolocation
      window.alert('Geolocation is not supported');
     }

     function calculateAndDisplayRoute(directionsService, directionsDisplay) {
        var latrest = <?php echo json_encode($latrest);?>;
        var lngrest = <?php echo json_encode($lngrest);?>;
        var rest = {lat: JSON.parse(latrest), lng: JSON.parse(lngrest)};

        //var selectedMode = "WALKING";
        directionsService.route({
          origin: {lat: 51.203278, lng: 2.758969},  // current position.
          destination: rest,  // restaurant.
          // Note that Javascript allows us to access the constant
          // using square brackets and a string value as its
          // "property."
          travelMode: google.maps.TravelMode.WALKING
        }, function(response, status) {
          if (status == 'OK') {
            directionsDisplay.setDirections(response);
          } else {
            window.alert('Directions request failed due to ' + status);
          }
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBWTXOkLL3td_c8oQni-qi74ICSypn7GM8&callback=initMap">
    </script>
  </body>

As you can see I tried to implement my current position as the origin.I already tried to get the variable pos as origin, but this is not working...Even the Google Guides were not clear to me...

Thanks for helping!

解决方案

Your current position is declared inside another fuction, so it's basically invisible to every other functions.

   navigator.geolocation.getCurrentPosition(function(position) {
      var pos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };

    }, function() {
      handleLocationError(true, markerme);
    });

I'd suggest calculating your position inside initMap and then passing your current position as a parameter to calculateAndDisplayRoute.

function initMap() {
    ...
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: JSON.parse(zoomtp),
      center: tp
    });
    directionsDisplay.setMap(map);

    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var pos = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };
        calculateAndDisplayRoute(directionsService, directionsDisplay, pos);

      }, function() {
        handleLocationError(true, markerme);
       });
    } else {
     // Browser doesn't support Geolocation
     window.alert('Geolocation is not supported');
    }


 }

function calculateAndDisplayRoute(directionsService, directionsDisplay, pos) {
    var latrest = <?php echo json_encode($latrest);?>;
    var lngrest = <?php echo json_encode($lngrest);?>;
    var rest = {lat: JSON.parse(latrest), lng: JSON.parse(lngrest)};

    //var selectedMode = "WALKING";
    directionsService.route({
      origin: pos,  // current position.
      destination: rest,  // restaurant.
      // Note that Javascript allows us to access the constant
      // using square brackets and a string value as its
      // "property."
      travelMode: google.maps.TravelMode.WALKING
    }, function(response, status) {
      if (status == 'OK') {
        directionsDisplay.setDirections(response);
      } else {
        window.alert('Directions request failed due to ' + status);
      }
    });
}

这篇关于从当前位置获取到预定义目标的路线（地理位置）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

09-05 17:10
Powered by LMLPHP ©2025 从当前位置获取到预定义目标的路线 0.037620