2014-09-24 166 views
-1

我對此模塊使用了google map javascript V3 API。 此代碼工作正常,直到我們不拖動地圖,但是當我拖動地圖時,我會得到「Uncaught TypeError:無法讀取屬性'長度'null」(來自谷歌瀏覽器檢查元素)未捕獲TypeError:無法讀取null的屬性「長度」

代碼:

<html> 
    <head> 
     <title> 
      Google Search 
     </title> 
     <style type="text/css"> 
      html, body { height: 100%; margin: 0; padding: 0;} 
      #map-canvas { height: 80%; width:80%; margin: auto; padding: 0;} 
     </style> 
     <script src="js/jquery.min.js"></script> 
     <script src="https://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script> 
     <script> 
      var map; 
      var service; 

      $(document).ready(function(){ 
       navigator.geolocation.getCurrentPosition(initialize); 
      }); 

      function initialize(location) { 
       console.log(location); 

       var currentlocation = new google.maps.LatLng(location.coords.latitude, location.coords.longitude); 

       var mapOptions = { 
        center: currentlocation , 
        zoom: 12, 
        mapTypeId: google.maps.MapTypeId.ROADMAP, 
        disableDefaultUI: true, 
        draggable: true 
       }; 
       map = new google.maps.Map(document.getElementById("map-canvas"), 
        mapOptions); 

       var marker = new google.maps.Marker({ 
        position: currentlocation, 
        map: map, 
        title:"Hello World!" 
       }); 

       service = new google.maps.places.PlacesService(map); 

       google.maps.event.addListener(map, 'bounds_changed', performSearch); 

       var circleOptions = { 
        strokeColor: '#FF0000', 
        strokeOpacity: 0.8, 
        strokeWeight: 2, 
        fillColor: '#FF0000', 
        fillOpacity: 0.25, 
        map: map, 
        center: currentlocation, 
        radius: 10000 
       }; 

       var circle = new google.maps.Circle(circleOptions); 

      } 

      function performSearch() { 
       var request = { 
        bounds: map.getBounds(), 
        name: "McDonald's" 
       }; 

       service.nearbySearch(request, handleSearchResult); 
      } 

      function handleSearchResult(results, status){ 
       console.log(results); 
       for (var i = 0; i < results.length; i++) { 
        var marker = new google.maps.Marker({ 
         position: results[i].geometry.location, 
         map: map, 
         icon: "images//restaurant-71.png" 
        }); 
       } 
      } 
     </script> 
    </head> 
    <body> 
     <div id="map-canvas"></div> 
    </body> 
</html> 

回答

1

您不檢查地點搜索的返回狀態。如果遇到錯誤(或不返回任何結果),則會失敗。

function handleSearchResult(results, status){ 
    if (status == google.maps.places.PlacesServiceStatus.OK) { 
    for (var i = 0; i < results.length; i++) { 
     var marker = new google.maps.Marker({ 
      position: results[i].geometry.location, 
      map: map, 
      icon: "images//restaurant-71.png" 
     }); 
    } 
    else { alert("no results"); } 
} 
相關問題