Google Maps API 最快路线

Question

这是我的地图代码。 但是当你运行它时，一开始一切都很好。然后，如果您单击“Let's Go！”你得到这个错误：
Assertion failed: InvalidValueError: in property origin: not a string; and not a LatLng or LatLngLiteral: not an Object; and not an ObjectAb @ maps.googleapis.com/maps-api-v3/api/js/22/11a/main.js:16 index.html:7 和

Uncaught TypeError: Cannot read property 'N' of null  

有人知道怎么解决吗？？？如果有请帮忙

html:

<div id="floating-panel">
   <input id="toAddress" type="textbox" value="">
   <input id="submit" type="button" value="Lets Go!">
</div>
<div id="map"></div>

javascript：

        var currentPosition;

        function initMap() {
          var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 8,
            center: {lat: 33.8, lng: -84.4}

          });
          var geocoder = new google.maps.Geocoder();

          var trafficLayer = new google.maps.TrafficLayer();
          trafficLayer.setMap(map);

          var directionsService = new google.maps.DirectionsService;
          var directionsDisplay = new google.maps.DirectionsRenderer;
          directionsDisplay.setMap(map);

          var infoWindow = new google.maps.InfoWindow({map: map});

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

              currentPosition = new google.maps.LatLng(parseFloat(pos.geolocation.lat), parseFloat(pos.geolocation.lng));


              infoWindow.setPosition(pos);
              infoWindow.setContent('Location found.');
              map.setCenter(pos);
            }, function() {
              handleLocationError(true, infoWindow, map.getCenter());
            });
          } else {
            // Browser doesn't support Geolocation
            handleLocationError(false, infoWindow, map.getCenter());
          }
        }

        function handleLocationError(browserHasGeolocation, infoWindow, pos) {
          infoWindow.setPosition(pos);
          infoWindow.setContent(browserHasGeolocation ?
                                'Error: The Geolocation service failed.' :
                                'Error: Your browser doesn\'t support geolocation.');
        }
          document.getElementById('submit').addEventListener('click', function() {
            // geocodeAddress(geocoder, map);
        var directionsService = new google.maps.DirectionsService;

            directionsService.route({
                origin: currentPosition,
                destination: document.getElementById('toAddress').value,
                travelMode: google.maps.TravelMode.DRIVING
              }, function(response, status) {
                if (status === google.maps.DirectionsStatus.OK) {
                  directionsDisplay.setDirections(response);
                } else {
                  window.alert('Directions request failed due to ' + status);
                }
              });

          });



        function geocodeAddress(geocoder, resultsMap) {
          var address = document.getElementById('address').value;
          geocoder.geocode({'address': address}, function(results, status) {
            if (status === google.maps.GeocoderStatus.OK) {
              resultsMap.setCenter(results[0].geometry.location);
              var marker = new google.maps.Marker({
                map: resultsMap,
                position: results[0].geometry.location
              });
            } else {
              alert('Geocode was not successful for the following reason: ' + status);
            }
          });

        }

Answer 1

看起来 lat 和 lng 坐标的格式不正确in property origin: not a string; and not a LatLng or LatLngLiteral: not an Object; and not an ObjectAb 和 Uncaught TypeError: Cannot read property 'N' of null 表示您的值之一正在以 null 或空值输入您的函数。如果可以，请发布您的一些 HTML。如果您不想……我会在运行此代码之前 console.log 这个目标值是什么。

 directionsService.route({
            origin: currentPosition,    //<------
            destination: document.getElementById('toAddress').value,  //<------
            travelMode: google.maps.TravelMode.DRIVING
          }, function(response, status) {
            if (status === google.maps.DirectionsStatus.OK) {
              directionsDisplay.setDirections(response);
            } else {
              window.alert('Directions request failed due to ' + status);
            }
          });

还要检查返回的当前位置值可能是您的地理定位器已关闭。如果是这样，它将解释您得到的 null 错误的无法读取属性“N”。

这可能不是您要寻找的答案，但也许这将有助于进行一些调试。也发布您的 html 的简化版本。

祝你好运！

Answer 2

当您的 navigator.geolocation 失败时会出现此错误，在这种情况下，您将不会使用 latlng 文字设置 currentPosition，因此方向 API 将给出错误，因为原点是 unknown。