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

你可以试试这个例子。 jQuery允许线程forloop

{{1}}

Answer 2

您可以使用函数闭包将数字与请求相关联：

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>

Google地图编号的标记都显示相同的编号

2 个答案: