Question

我对使用Google Maps API的JavaScript有一点问题。我需要找到某个地方附近的所有商店，所以我有一个包含这个的功能：

service = new google.maps.places.PlacesService(map);
service.nearbySearch({
                   location: my_loc,
                   radius: 500,
                   type: ['store']
               }, callback);

回调函数如下所示：

function callback(results, status) {
           if (status === google.maps.places.PlacesServiceStatus.OK) {                                 
               results.map(function (item) {
                     // do things here
               });
           }
}

问题是结果数组有16个元素（如果我在回调中警告（results.length），它显示值16，这是正确的），但结果上的映射只考虑其中的10个。奇怪的是，如果我在映射函数中添加“alert（item）”，那么它将考虑所有16个元素并用它们做正确的事情。

为什么此警报使函数看到整个数组？如何在没有警报的情况下让它看到所有元素？谢谢！

更新：完整代码

function initMap() {
           var lng;
           var lat;
           navigator.geolocation.getCurrentPosition(function (position) {                   
               var my_loc = { lat: position.coords.latitude, lng: position.coords.longitude };                   
               map = new google.maps.Map(document.getElementById('map'), {
                   center: my_loc,
                   zoom: 15
               });
               geocoder = new google.maps.Geocoder;
               infowindow = new google.maps.InfoWindow();
               service = new google.maps.places.PlacesService(map);
               service.nearbySearch({
                   location: my_loc,
                   radius: 500,
                   type: ['store']
               }, callback);
           }, handle_errors);               
       }

function callback(results, status) {
           if (status === google.maps.places.PlacesServiceStatus.OK) {                   
               results.map(function (item) {                     
                   var id = item.place_id;
                   service.getDetails({ placeId: id }, function (place, status) {
                       if (status === google.maps.places.PlacesServiceStatus.OK) {
                           var lista = document.getElementById("lista");
                           var elem = document.createElement("tr");
                           var text1 = document.createTextNode(place.name + " ");
                           var sp1 = document.createElement("td");
                           sp1.appendChild(text1);
                           elem.appendChild(sp1);
                           lista.appendChild(elem);
                           createMarker(item);
                        }
                    });
                });
             }
}

function createMarker(place) {
           var placeLoc = place.geometry.location;
           var marker = new google.maps.Marker({
               map: map,
               position: place.geometry.location
           });
           google.maps.event.addListener(marker, 'click', function () {
               infowindow.setContent(place.name);
               infowindow.open(map, this);
           });
       }


function handle_errors(error) {
           alert("Geolocation is not enabled");
           }

Answer 1

您在返回的每个结果上调用.getDetails。该方法受限于配额和费率限制。如果超出速率限制，服务将返回状态OVER_QUERY_LIMIT，当前代码忽略该状态。

proof of concept fiddle

要解决此问题，您需要降低对详细信息服务的请求，以符合速率限制。相关问题：OVER_QUERY_LIMIT in Google Maps API v3: How do I pause/delay in Javascript to slow it down?

代码段

function initMap() {
  var lng;
  var lat;
  var my_loc = new google.maps.LatLng(37.4419, -122.1419);
  map = new google.maps.Map(document.getElementById('map'), {
    center: my_loc,
    zoom: 10
  });
  geocoder = new google.maps.Geocoder;
  infowindow = new google.maps.InfoWindow();
  service = new google.maps.places.PlacesService(map);
  service.nearbySearch({
    location: my_loc,
    radius: 10000,
    type: ['store']
  }, callback);
}

function callback(results, status) {
  if (status === google.maps.places.PlacesServiceStatus.OK) {
    console.log("nearbySearch returned " + results.length + " results")
    results.map(function(item) {
      var id = item.place_id;
      service.getDetails({
        placeId: id
      }, function(place, status) {
        if (status === google.maps.places.PlacesServiceStatus.OK) {
          createMarker(item);
        } else console.log("error: status=" + status);
      });
    });
  }
}

function createMarker(place) {
  console.log("adding place " + place.name + " loc=" + place.geometry.location.toUrlValue(6));
  var placeLoc = place.geometry.location;
  var marker = new google.maps.Marker({
    map: map,
    position: place.geometry.location
  });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(place.name);
    infowindow.open(map, this);
  });
}
google.maps.event.addDomListener(window, "load", initMap);

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<div id="map"></div>

附近的搜索回调不会遍历所有元素（返回地点详细信息）

1 个答案: