谷歌地图 v3 的 setinterval 或 settimeout答案

【问题标题】：setinterval or settimeout for google map v3谷歌地图 v3 的 setinterval 或 settimeout
【发布时间】：2012-03-20 23:49:11
【问题描述】：

。我有 50 个来自 sql 的地址。每个地址都将在 div LocationAddress 中呈现。我遍历它们中的每一个，进行地理编码并在地图中绘制标记。但它只显示11个。我知道这是因为地理编码器遇到瓶颈。如何使用 setinterval 或 settimeout 来控制它？我研究并看到人们使用 settimeout 来处理这个......请有人指导我......

  var geocoder;
      var map;
      function initialize() {
        geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng(42.095287, -79.3185139);
        var myOptions = {
          maxZoom: 14,
          zoom: 9,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
        };
        map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);

       }

    function codeAddress() {
        var infowindow = new google.maps.InfoWindow({}); 

        $('.LocationAddress').each(function() {

            var addy = $(this).text();
            geocoder.geocode( { 'address': addy}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                        map.setCenter(results[0].geometry.location);
                        var marker = new google.maps.Marker({
                        position: results[0].geometry.location,
                        map: map,               
                        title:addy,
                    });

                 //Adding a click event to the marker 
                google.maps.event.addListener(marker, 'click', function() { 
                    infowindow.setContent('<div id=\"infowindow\" style=" height:100px;>'
                                            +'<div id=\"LeftInfo\">'+ "Hello World!"
                                            +'</div>'+'</div>'); 
                    infowindow.open(map, this); 
                });  
             }  

            });//Geocoder END

        });
    }

【问题讨论】：

标签： jquery map settimeout marker geocode

【解决方案1】：

我实际上对其进行了编码和测试，这个工作：

var geocoder;
var map;
var addresses = new Array();
var infowindow;
var theInterval;

function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(42.095287, -79.3185139);
    var myOptions = {
        maxZoom: 14,
        zoom: 9,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    infowindow = new google.maps.InfoWindow({});
}

$(document).ready(function () {
    getAddresses();
    theInterval = setInterval("codeAddress()", 1000);
});

function getAddresses () {
    $('.LocationAddress').each(function () {
        addresses.push($(this).text());
    });
}

function codeAddress() {
    if (addresses.length == 0) {
        clearInterval(theInterval);
    }
    var addy = addresses.pop();
    geocoder.geocode({
        'address': addy
    }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
                position: results[0].geometry.location,
                map: map,
                title: addy,
            });

            //Adding a click event to the marker 
            google.maps.event.addListener(marker, 'click', function () {
                infowindow.setContent('<div id=\"infowindow\" style=" height:100px;>' + '<div id=\"LeftInfo\">' + "Hello World!" + '</div>' + '</div>');
                infowindow.open(map, this);
            });
        }

    }); //Geocoder END
}

【讨论】：

在哪里使用 setInterval 函数？在 CodeAddress() 里面？或在 codeAddress(){} 之后？？
你在外面做。无论如何，我只是在addresses.length==0部分编辑它以清除我们所做的间隔。
getAddress() 在哪里被调用？某事坏了，所以我的地图根本没有显示......当你说'在顶部声明一个将包含我们的地址和信息窗口的变量：'你的意思是让那些全局变量？所以它们可用于任何功能？
对于地址，是的，但是对于 infowindow，您可以尝试将 var infowindow 放在顶部，然后在 initialize put infowindow = new google.maps.Infowindow({});
我们放置 setInterval 的原因是将每个地理编码请求间隔一秒。如此处所示 (developers.google.com/maps/documentation/business/…)，我们每秒只能进行 10 次查询。您可以将其从 1000 (1s) 减少到 100 以使其达到 10qps。

【解决方案2】：

您可以对请求进行序列化，以便一次处理一个地址。当那个完成时，你处理下一个。可以这样做：

function codeAddress() {
    var infowindow = new google.maps.InfoWindow({}); 

    var addresses = $('.LocationAddress');
    var addressIndex = 0;

    function next() {
        if (addressIndex < addresses.length) {
            var addy = addresses.eq(addressIndex).text();
            ++addressIndex;
            geocoder.geocode( { 'address': addy}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                        map.setCenter(results[0].geometry.location);
                        var marker = new google.maps.Marker({
                        position: results[0].geometry.location,
                        map: map,               
                        title:addy,
                    });

                 //Adding a click event to the marker 
                google.maps.event.addListener(marker, 'click', function() { 
                    infowindow.setContent('<div id=\"infowindow\" style=" height:100px;>'
                                            +'<div id=\"LeftInfo\">'+ "Hello World!"
                                            +'</div>'+'</div>'); 
                    infowindow.open(map, this); 
                });  
                next();
             }  

            });//Geocoder END
        }
    }
    next();
}

【讨论】：

@AnjanaSharma - 那么，一定是某处发生了错误。您需要查看错误控制台并在状态代码上执行console.log(status) 以准确了解正在处理哪些地址以及原因。听起来是时候进行一些基本的调试了。