0

我的标记没有出现在附近搜索的结果中。谁能帮忙？我对 javascript 和 google api 非常陌生。我基本上是想找到该地区所有的麦当劳。唯一显示的标记是用户的当前位置。提前致谢！:D

<!DOCTYPE HTML>
<html>

    <head>
        <title>Basic GeoLocation Map</title>
        <!-- Google Maps and Places API -->
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&amp;sensor=false"></script>
        <!-- jQuery -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript">
            function initGeolocation() {
                if (navigator.geolocation) {

                    // Call getCurrentPosition with success and failure callbacks
                    navigator.geolocation.getCurrentPosition(success, fail);
                } else {
                    alert("Sorry, your browser does not support geolocation services.");
                }
            }
            var map;
            var service;

            function handleSearchResults(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
                    });
                }

            }

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

                service.nearbySearch(request, handleSearchResults);
            }

            function success(position) {
                // Define the coordinates as a Google Maps LatLng Object
                var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

                // Prepare the map options
                var mapOptions = {
                    zoom: 14,
                    center: coords,
                    mapTypeControl: false,
                    navigationControlOptions: {
                        style: google.maps.NavigationControlStyle.SMALL
                    },
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                // Create the map, and place it in the map_canvas div
                map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);


                // Place the initial marker
                var marker = new google.maps.Marker({
                    position: coords,
                    map: map,
                    title: "Your current location!"
                });
                marker.setMap(map);

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

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

            function fail() {
                // Could not obtain location
            }

             //Request places from Google

            function placesRequest(title, latlng, radius, types, icon) {
                //Parameters for our places request
                var request = {
                    location: latlng,
                    radius: radius,
                    types: types
                };
                //Make the service call to google
                var callPlaces = new google.maps.places.PlacesService(map);
                callPlaces.search(request, function (results, status) {
                    //trace what Google gives us back
                    $.each(results, function (i, place) {
                        var placeLoc = place.geometry.location;
                        var thisplace = new google.maps.Marker({
                            map: map,
                            position: place.geometry.location,
                            icon: icon,
                            title: place.name
                        });
                    })
                });

            }
        </script>
    </head>

    <body onload="initGeolocation();">
        <div style="position:absolute; width:380px; height: 100%; overflow:auto; float:left; padding-left:10px; padding-right:10px;">
             <h1>Google Places API</h1>

            <p>We're using both google places (to search for things in a certain category) AND google maps (to put the things on a map)~! PLUS we're using geolocatoin to automatically centre the map on the user's current location!</p>
        </div>
        <!-- map div container -->
        <div id="map_canvas" style="height:500px; margin-left:400px; border-right: 1px solid #666666; border-bottom: 1px solid #666666; border-top: 1px solid #AAAAAA; border-left: 1px solid #AAAAAA;"></div>
    </body>

</html>
4

1 回答 1

0

更改performSearch（不正确使用）为

function performSearch() {
  var request = {
    location: map.getCenter(),
    radius: 1500,
    name: ["McDonald's"]
  }
  service.nearbySearch(request, handleSearchResults);
}

和handleSearchResults（一些错别字）

function handleSearchResults(results, status) {
  for(var i = 0; i < results.length; i++) {
    var marker=new google.maps.Marker({
      position: results[i].geometry.location,
      map: map
    });
   }
}

..你的例子有效。对我来说，在附近返回 5 家麦当劳 :-)

于 2013-05-24T13:30:06.157 回答