带地址的地理编码 - over_query_limit 问题答案

【问题标题】：Geocoding with address - over_query_limit issue带地址的地理编码 - over_query_limit 问题
【发布时间】：2016-03-10 19:41:08
【问题描述】：

我正在使用谷歌地图 API 在地图上创建标记。我正在创建一个基于 lat/lng 的常规标记。如果缺少，我将依赖物理地址并对其进行地理编码。如果我有超过 50 个地址，我在地理编码时会遇到 OVER_QUERY_LIMIT。我读过一些建议使用计时器的帖子。在这种情况下，我应该在哪里引入计时器或延迟？

编辑：添加了一个计时器，但效果不佳。浏览器会在一段时间后弹出。

这是我的代码：

$scope.loadMap = function(){
    $("#map").width(942).height(400);
    google.maps.event.trigger(map, "resize");
    var storeLatLng = new google.maps.LatLng(40.0000, -98.0000);
    var mapOptions = {
        zoom: 4,
        center: new google.maps.LatLng(40.0000, -98.0000),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var bounds = new google.maps.LatLngBounds();
    if(!map){
        map = new google.maps.Map($('#map')[0], mapOptions);
    }
    else{
        map.setOptions(mapOptions);
    }   
    for (i = 0; i < $scope.addresses.length; i++) {
        var storeItem = $scope.addresses[i];

        if(storeItem.latitudeOrg && storeItem.longitudeOrg){
            $log.info("latlng for store:" + storeItem.city + ":" + storeItem.latitudeOrg +":"+storeItem.longitudeOrg);
            storeLatLng = new google.maps.LatLng(storeItem.latitudeOrg, storeItem.longitudeOrg);
            var marker1 = new google.maps.Marker({
                position: storeLatLng,
                map: map,
                title: storeItem.city
            });
        }
        else{ // Rely on physical address (city, state) if lat/lng is either empty or null
            var address = storeItem.address1 + "," + storeItem.city + "," + storeItem.state;
            $log.info("address for store:" +storeItem.id+":"+ ":" + address);
            var city = storeItem.city;
            var geocoder = new google.maps.Geocoder();
            geocoder.geocode({
                'address' : address
            }, function(results, status) {
                if ( status == google.maps.GeocoderStatus.OK ) {
                    var locality='';
                    var lat = results[0].geometry.location.lat();
                    var lng = results[0].geometry.location.lng();
                    for(var i=0; i<results[0].address_components.length; i++){
                        var component = results[0].address_components[i];
                        if(component.types[0] == 'locality'){
                            locality = component.long_name; 
                        }
                    }
                    storeLatLng = new google.maps.LatLng(lat, lng);
                    var marker2 = new google.maps.Marker({
                        position: storeLatLng,
                        map: map,
                        title: locality.toUpperCase()
                    });

                } else if (status === google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
                    $log.info("OVER_QUERY_LIMIT");
                    setTimeout(function() {
                        $scope.loadMarkers();
                    }, 100);
                } else {
                    $log.info("Geocode was not successful for the following reason:" + status);
                }
            });
        }
    }
}

【问题讨论】：

对它们进行一次地理编码并存储结果
查看使用条款“Google Maps Geocoding API 只能与 Google 地图一起使用；禁止在未在地图上显示的情况下对结果进行地理编码。”
无缓存或存储。您不会预取、缓存、索引或存储任何要在服务之外使用的内容，但由于网络延迟（以及不是为了阻止 Google 准确跟踪使用情况），并且仅在此类存储：
developers.google.com/maps/terms#10-license-restrictions
@William - 我不确定你在说什么？我正在地图上显示地理编码地址。

标签： javascript angularjs google-maps geocode

【解决方案1】：

geocoder.geocode() 作为异步工作。

这意味着您同时请求 geocoder.geocode() 50 次。您的代码中发生的情况是：

geocoder.geocode()  ---> Send a geocode request to Google (#1)
geocoder.geocode()  ---> Send a geocode request to Google (#2)
geocoder.geocode()  ---> Send a geocode request to Google (#3)
geocoder.geocode()  ---> Send a geocode request to Google (#4)
geocoder.geocode()  ---> Send a geocode request to Google (#5)

<--- response from Google for #1
geocoder.geocode()  ---> Send a geocode request to Google (#6)
geocoder.geocode()  ---> Send a geocode request to Google (#7)
<--- response from Google for #2
geocoder.geocode()  ---> Send a geocode request to Google (#8)
geocoder.geocode()  ---> Send a geocode request to Google (#9)
<--- response from Google for #3
geocoder.geocode()  ---> Send a geocode request to Google (#10)
geocoder.geocode()  ---> Send a geocode request to Google (#11)
<--- response from Google for #4 "OVER_QUERY_LIMIT"  
<--- response from Google for #5 "OVER_QUERY_LIMIT"  
<--- response from Google for #6 "OVER_QUERY_LIMIT"  
<--- response from Google for #7 "OVER_QUERY_LIMIT"  
<--- response from Google for #8 "OVER_QUERY_LIMIT"  
<--- response from Google for #9 "OVER_QUERY_LIMIT"  
<--- response from Google for #10 "OVER_QUERY_LIMIT"  
<--- response from Google for #11 "OVER_QUERY_LIMIT"

你的代码有问题：

for (i = 0; i < $scope.addresses.length; i++) {
  ...
  var geocoder = new google.maps.Geocoder();
  geocoder.geocode({
    'address' : address
  }, function(results, status) {
    ...
  });
}

你应该等到之前的请求。

var geocoder = new google.maps.Geocoder();
$scope.addresses
var looping = function(index) {

  var storeItem = $scope.addresses[index];
  var address = ...
  myGeocode(address, function(results, status) {
    ..
    index++;

    if (index < $scope.addresses.length) {
      looping(index, arguments.callee);
    }
  });
}
looping(0);

function myGeocode(address, callback) {
  var geocoder = new google.maps.Geocoder();
  geocoder.geocode({
    'address' : address
  }, callback);
}

【讨论】：