谷歌地图编号标记都显示相同的数字

Google Maps numbered markers all displaying same number

本文关键字：数字 显示 编号 谷歌地图      更新时间：2023-09-26

我正在构建一个地图，我必须有编号的标记，以及下面的标记匹配地图上显示的列表。我正在加载地址数组并从同一个数组填充我的列表。标记位置在地图上正确显示，列表是正确的，但标记上的数字都是相同的(它们最终是地图上标记的数量+ 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);

您可以使用函数闭包将数字与请求关联起来:

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
        });
    });
}
工作小提琴

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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="googleMap" style="border: 2px solid #3872ac;"></div>
<div id="listID"></div>

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

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);
}
相关文章：