附近的地点搜索不会回调所有元素(返回地点详细信息) [英] Place nearbySearch Callback doesn't iterate through all elements (to return place details)

问题描述

我对使用Google Maps API的JavaScript有一点问题.我需要找到某个地点附近的所有商店，所以我有一个包含以下内容的函数:

I have a little problem regarding JavaScript with Google Maps API. I need to find all the stores near a certain place, so I have a function that contains this:

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个元素(如果我在回调中发出alert(results.length)，则显示值为16，这是正确的)，但是对结果的映射仅考虑了其中的10个元素.奇怪的是，如果我在映射函数中添加"alert(item)"，那么它将考虑所有16个元素并对其进行正确处理.

The problem is that the results array has 16 elements (if I alert(results.length) in callback, it shows the value 16, which is right), however the mapping over results only takes into account 10 of them. What is strange is that if I add "alert(item)" in the mapping function, then it will take into account all the 16 elements and do the right stuff with them.

为什么此警报会使函数看到整个数组?而如何使它看到所有没有警报的元素?谢谢！

Why does this alert make the function see the whole array? And how can I make it see all the elements without that alert? Thanks!

更新:完整代码

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

推荐答案

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

You are calling .getDetails on each result returned. That method is subject to a quota and a rate limit. If you exceed the rate limit, the service returns a status of OVER_QUERY_LIMIT, which your current code is ignoring.

概念提琴证明

要解决此问题，您需要放慢对详细信息服务的请求，以符合速率限制.相关问题:

To address the issue, you need to slow your requests to the details service down to comply with the rate limit. Related question: 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&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>

这篇关于附近的地点搜索不会回调所有元素(返回地点详细信息)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！