从当前位置获取到预定义目的地的路线(地理位置)

时间:2017-03-09 13:13:53

标签: javascript google-maps

Nog我有以下页面,其中包含指向预定目的地的路线: example directions

这与以下代码完美配合:

    <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>

正如你所看到的,我试图将我当前的位置作为原点来实现。 我已经尝试将变量pos作为原点,但这不起作用...... 即便是谷歌指南也不清楚......

感谢您的帮助!

1 个答案:

答案 0 :(得分:1)

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

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

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

我建议您在initMap内计算您的位置,然后将当前位置作为参数传递给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);
      }
    });
}