setinterval或settimeout谷歌地圖v3

Question

。 我有50個來自sql的地址。每個地址將在div LocationAddress內呈現。我循環瀏覽每個地圖，並在地圖上繪製標記。但它只顯示11個。我知道這是因爲地理編碼器成爲瓶頸。我如何使用setinterval或settimeout來控制它？我研究，並且看到了setTimeout的處理this..please有人指導我的人......

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 

     }); 
    } 

Answer 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 
} 

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