使用Google Maps API v3進行地理編碼 - 將原始請求鏈接到響應

Question

我有一份我想要在Google地圖上繪製的學校列表。我使用Google's Geocoding Service查找給定郵政編碼的lng/lat，一旦成功檢索到此信息，我想放棄一個標記，並添加適當的事件偵聽器，以便在單擊給定標記時打開信息框。

當我向地理編碼器提出請求時，它在學校的上下文中，當我收到回調時，我失去了上下文。您將從下面的代碼中看到，我已經想出了一個笨拙的解決方案，儘管當geocoder結果截斷郵編時偶爾會失敗。

我應該使用類似jQuery's Deferred Object的東西來解決這個問題嗎？

var geocoder; 
var map; 
var infowindow 
var iterator = 0; 
geosearch = new Array(); 

function drop() { 
    for (var i = 0; i < schools.length; i++) { 
    setTimeout(function() { // delay added to prevent being throttled 
     addMarker(); 
     iterator++; 
    }, i * 1000); 
    } 
} 

function addMarker() { 
    address = schools[iterator].addresses[0].address.zip; 
    geosearch[address] = schools[iterator]; // this is how I'm keeping track of initial request 

    geocoder.geocode({ 'address': address }, function(results, status) { 
    var school = geosearch[results[0].address_components[0].short_name]; // loading the school associated with the initial request, which only works if the postcode completely matches up - clunky! 

    if (status == google.maps.GeocoderStatus.OK) { 

     // each school has tags, I want to set a marker if certain tags exist 
     if ($.inArray('D', school.tags) > 0) { 
     var image = 'map_markers/brown_MarkerD.png'; 
     } else if ($.inArray('C', school.tags) > 0) { 
     var image = 'map_markers/red_MarkerC.png'; 
     } else if ($.inArray('B', school.tags) > 0) { 
     var image = 'map_markers/yellow_MarkerB.png'; 
     } else if ($.inArray('A', school.tags) > 0) { 
     var image = 'map_markers/green_MarkerA.png'; 
     } else { 
     var image = 'map_markers/blue_MarkerZ.png'; 
     } 

     // add the marker to the map, using result 
     var marker = new google.maps.Marker({ 
      map: map, 
      position: results[0].geometry.location, 
      draggable: false, 
      icon: image, 
      shadow: 'http://www.google.com/mapfiles/arrowshadow.png', 
      animation: google.maps.Animation.DROP 
     }); 

     // adds listening on marker so that popup box appears when clicked 
     google.maps.event.addListener(marker, 'click', (function(marker, school) { 
     return function() { 
      infowindow.setContent(
      '<a href="https://vitalcpd.highrisehq.com/companies/'+school.id+'" target="_blank">'+school.name+'</a>' 
      +'<address>' 
      +school.addresses[0].address.street+'<br />' 
      +school.addresses[0].address.city+'<br />' 
      +school.addresses[0].address.state+'<br />' 
      +school.addresses[0].address.zip+'<br />' 
      +school.addresses[0].address.country+'<br />' 
      +'</address>'); 
      infowindow.open(map, marker); 
     } 
     })(marker, school)); 

    } else { 
     console.log("* NOT found: " + status); 
    } 
    }); 
} 

function initialise() { 
    geocoder = new google.maps.Geocoder(); 
    infowindow = new google.maps.InfoWindow(); 
    var latlng = new google.maps.LatLng(54.82659788452641,-3.417279296874991); 
    var mapOptions = { 
    zoom: 6, 
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 

    drop(); // loops through schools to add marker 
} 

Answer 1

我在這裏遇到的問題只是一個範圍問題，特別是我在addMarker()函數中引用學校的方式。我不是通過使用全局iterator變量引用schools數組中的學校，而是通過這個學校，這樣正確的學校總是在此範圍內創建的回調中引用。

var geocoder; 
var map; 
var infowindow 
var iterator = 0; 

function drop() { 
    for (var i = 0; i < schools.length; i++) { 
    setTimeout(function() { 
     addMarker(schools[iterator]); // pass in the school as an argument 
     iterator++; 
     $('#current_school').text(iterator); // taken this out of addMarker() 
    }, i * 1000); 
    } 
} 

function addMarker(school) { 
    geocoder.geocode({ 'address': school.addresses[0].address.zip }, function(results, status) { 
    ... // the inners from here remain the same 
    }); 
} 

Answer 2

我建議離線地址解碼並將座標存儲到數據庫（或存儲地址的任何地方）。然後使用座標顯示標記。

我也建議審查this article on geocoding strategies from the documentation

要回答你的問題，我建議使用javascript函數閉包與回調函數的地址相關聯。