Question

我正在尝试使用谷歌地图API和浏览器导航器在javascript中编写与查找我的位置有关的程序，然后在地方放置一个标记。我的代码适用于此部分。但是对于第二部分，我想找到附近的地方，并在它们上面放标记不起作用，我找不到问题。它给我一个关于map变量的错误。似乎代码中断并且无法获取performsearch函数的map变量。任何想法都会受到高度赞赏吗？代码如下：

<!DOCTYPE html>
 <html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <style type="text/css">
            html { height: 100% }
            body { height: 100%; margin: 0; padding: 0 }
            #map-canvas { height: 75% }
        </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC2MndnCGBXqDolsrQYhNdVyXqsk0NRm8Q&sensor=true&libraries=places">
        </script>
        <script type="text/javascript" >
        var map;

            function handleSearchResults(results, status)
           {
               console.log(results);
               document.write

           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: results[i].icon
                               });
                       }      
                  }

           }
        function performSearch()
            {

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

            var service = new google.maps.places.PlacesService(map);
                service.nearbySearch(request, handleSearchResults(results, status));

           }

           function initialize(location) 
               {
               var myLatlng = new google.maps.LatLng(location.coords.latitude, location.coords.longitude);

                   var mapOptions = 
                       {
                           center: myLatlng,
                           zoom: 9
                       };
                   var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
           var marker = new google.maps.Marker(
                       {
                   position: myLatlng,
               map: map,
               title: "My place"
               }); 

           service = new google.maps.event.addListenerOnce(map, 'bounds_changed', performSearch());
              }



      $(document).ready(function()
          {
              navigator.geolocation.getCurrentPosition(initialize);
          });
        </script>
    </head>
    <body>
        <div id="map-canvas"/>
    </body>
</html>

Answer 1

有几个问题。固定代码（修改内部注释）：

var map;

function handleSearchResults(results, status) {

    if (status == google.maps.places.PlacesServiceStatus.OK) {

        for (var i = 0; i < results.length; i++) {
            var marker = new google.maps.Marker({
                //typo: it must be location not Location
                position: results[i].geometry.location,
                map: map,
                icon: results[i].icon
            });
        }
    }

}

function performSearch() {

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

    var service = new google.maps.places.PlacesService(map);
    //use only the name of the function as callback-argument
    service.nearbySearch(request, handleSearchResults);

}

function initialize(location) {
    var myLatlng = new google.maps.LatLng(location.coords.latitude, 
                                          location.coords.longitude);

    var mapOptions = {
        center: myLatlng,
        zoom: 9
    };
    //removed the var-keyword(otherwise map is not global accessible)
    map = new google.maps.Map(document.getElementById("map-canvas"), 
                              mapOptions);
    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: "My place"
    });
    //again: use only the name of the function as callback-argument
    service = new google.maps.event.addListenerOnce(map, 
                                                    'bounds_changed', 
                                                     performSearch);
}



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

但请注意：地理定位可能会失败，目前地图永远不会在失败时初始化。您最好将地图创建与地理定位分开

谷歌地图API附近的地方

1 个答案: