谷歌地圖編號標記全都顯示相同數字

Question

我正在構建一個地圖，我必須有編號標記以及標記與地圖上顯示的標記匹配的下方列表。我正在加載地址數組，並從同一個數組中填充我的列表。標記位置在地圖上正確顯示，列表正確，但標記上的數字全部相同（它們最終成爲地圖上的標記數+ 1）。因此在這個例子中，由於有3個地址，每個標記顯示「4」。

我的代碼：

function initialize() 
{ 

var map; 
var elevator; 
var myOptions = { 
    zoom: 9, 
    center: new google.maps.LatLng(34.0708,-118.2762), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 
map = new google.maps.Map($('#googleMap')[0], myOptions); 

var addresses = [ 
{NAME:"an address name string",ADDRESS:"an address number string"}, 
{NAME:"an address name string",ADDRESS:"an address number string"}, 
{NAME:"an address name string",ADDRESS:"an address number string"} 
] 

for (var x = 0; x < addresses.length; x++) { 

    //The list, which works correctly 
    $("#listID").append("<li><img src='http://gmaps-samples.googlecode.com/svn/trunk/markers/blue/marker" + (x + 1) + ".png' alt='marker'><strong>" + addresses[x].NAME + "</strong><br>" + addresses[x].ADDRESS + "<br></li>"); 

    //Based off another SO answer, to populate the map based on addresses without having to look up lat/lng 
    $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x].ADDRESS +'&sensor=false', null, function (data) { 
     var p = data.results[0].geometry.location; 
     var latlng = new google.maps.LatLng(p.lat, p.lng); 
     var image = 'http://gmaps-samples.googlecode.com/svn/trunk/markers/blue/marker' + (x + 1) + '.png'; 
     new google.maps.Marker({ 
      position: latlng, 
      icon: image, 
      map: map 
     }); 

    }); 
} 

} 

google.maps.event.addDomListener(window, 'load', initialize); 

Answer 1

您可以使用函數閉包的數量與請求相關聯：

function geocodeAddress(x, map) { 
    //populate the map based on addresses using the geocoder to look up lat/lng 
    $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x].ADDRESS +'&sensor=false', null, function (data) { 
     var p = data.results[0].geometry.location; 
     var latlng = new google.maps.LatLng(p.lat, p.lng); 
     var image = 'http://gmaps-samples.googlecode.com/svn/trunk/markers/blue/marker' + (x + 1) + '.png'; 
     new google.maps.Marker({ 
      position: latlng, 
      icon: image, 
      map: map 
     }); 

    }); 
} 

working fiddle

function initialize() { 
 
    function geocodeAddress(x, map) { 
 
    //Based off another SO answer, to populate the map based on addresses without having to look up lat/lng 
 
    $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address=' + addresses[x].ADDRESS + '&sensor=false', null, function(data) { 
 
     var p = data.results[0].geometry.location; 
 
     var latlng = new google.maps.LatLng(p.lat, p.lng); 
 
     var image = 'http://gmaps-samples.googlecode.com/svn/trunk/markers/blue/marker' + (x + 1) + '.png'; 
 
     new google.maps.Marker({ 
 
     position: latlng, 
 
     icon: image, 
 
     map: map 
 
     }); 
 

 
    }); 
 
    } 
 

 

 
    var map; 
 
    var elevator; 
 
    var myOptions = { 
 
    zoom: 9, 
 
    center: new google.maps.LatLng(34.0708, -118.2762), 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 
    map = new google.maps.Map($('#googleMap')[0], myOptions); 
 

 
    var addresses = [{ 
 
    NAME: "an address name string 1", 
 
    ADDRESS: "Los Angeles, CA" 
 
    }, { 
 
    NAME: "an address name string 2", 
 
    ADDRESS: "Long Beach, CA" 
 
    }, { 
 
    NAME: "an address name string 3", 
 
    ADDRESS: "Anaheim, CA" 
 
    }] 
 

 
    for (var x = 0; x < addresses.length; x++) { 
 

 
    //The list, which works correctly 
 
    $("#listID").append("<li><img src='http://gmaps-samples.googlecode.com/svn/trunk/markers/blue/marker" + (x + 1) + ".png' alt='marker'><strong>" + addresses[x].NAME + "</strong><br>" + addresses[x].ADDRESS + "<br></li>"); 
 
    geocodeAddress(x, map); 
 

 
    } 
 
} 
 

 

 

 

 
google.maps.event.addDomListener(window, 'load', initialize);

html, 
 
body, 
 
#googleMap { 
 
    height: 500px; 
 
    width: 500px; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="googleMap" style="border: 2px solid #3872ac;"></div> 
 
<div id="listID"></div>

Answer 2

你可以試試這個，例如。 jQuery的允許線程for循環

for (var x = 0; x < addresses.length; x++) { 
    (function(x){ 
    //The list, which works correctly 
    $("#listID").append("<li><img src='http://gmaps-samples.googlecode.com/svn/trunk/markers/blue/marker" + (x + 1) + ".png' alt='marker'><strong>" + addresses[x].NAME + "</strong><br>" + addresses[x].ADDRESS + "<br></li>"); 

    //Based off another SO answer, to populate the map based on addresses without having to look up lat/lng 
    $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x].ADDRESS +'&sensor=false', null, function (data) { 
     var p = data.results[0].geometry.location; 
     var latlng = new google.maps.LatLng(p.lat, p.lng); 
     var image = 'http://gmaps-samples.googlecode.com/svn/trunk/markers/blue/marker' + (x + 1) + '.png'; 
     new google.maps.Marker({ 
      position: latlng, 
      icon: image, 
      map: map 
     }); 

    }); 
    })(x); 
}