2015-11-03 221 views
-3

这是我的地图代码。 但是当你运行它时,一切都很好。然后,如果你点击“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:7Google Maps API最快路线

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); 
      } 
      }); 

     } 
+1

请提供一个[最小,完整,已测试和可读的示例](http://stackoverflow.com/help/mcve)来说明问题。在发布的代码中没有HTML(“Let's Go”)。 – geocodezip

+0

我添加了html – Thayne

回答

0

它看起来像纬度和经度坐标是不正确的格式in property origin: not a string; and not a LatLng or LatLngLiteral: not an Object; and not an ObjectAbUncaught 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); 
      } 
      }); 

此外,请检查返回的当前位置值可能是您的geolocator关闭。如果是这样,它将解释不能读取属性'N'你得到的空错误。

这可能不是你正在寻找的答案,但也许这将有助于一些调试。发布你的html的简化版本。

祝你好运!

+0

添加了html。 – Thayne

0

这个错误会来,当你navigator.geolocation失败,在这种情况下,你不会有currentPosition一套具有经纬度文字如此以来,起源是unknown方向API会给错误。