Question

我为这个模块使用了google map javascript V3 API。这段代码工作得很好，直到我们不拖动地图，但是当我拖动地图时，我会得到＆＃34; Uncaught TypeError：无法读取属性＆＃39;长度＆＃39; of null＆＃34;（来自google chrome inspect element）

代码：

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

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

未捕获的TypeError：无法读取属性＆＃39; length＆＃39;为null

1 个答案: