关于访问 Google 地图信息窗口 (infoBox) 中的 JSON 值的问题

Question

使用 jQuery Ajax 调用我试图在地图上显示一些标记及其数据库中的相关信息：

$(document).ready(function () {
        var markers = []; 
        var infoBox = null;
        var myOptions = { 
            zoom: 12,
            center: new google.maps.LatLng(49.241943, -122.889318),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            sensor: 'true'
        }
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);


        $("#g-one-1").on("click",function(){
        var data = 'data=' + "open";
        var reqOne = $.ajax({
                                type: "POST",
                                url: "assets/gone.php",
                                data:  data,
                                cache: false,
                                dataType: "JSON",
                                beforeSend: function () {console.log(data);},
                                complete: function () {console.log("Data Is Sent");}
                            });
        reqOne.fail(function() { console.log( "There is an Error" ); });
        reqOne.done(function(data){

            for (var i = 0; i < data.length; i++) {
            var current = data[i];
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(current.lat, current.lng),
                map: map,
                content: current.content
            });

            markers.push(marker);
           var projName = data[i].name;
            google.maps.event.addListener(markers[i], "click", function (e) {
                if (!infoBox) {
                    infoBox = new InfoBox({
                        latlng: this.getPosition(),
                        map: map,
                        content: '<table class="table"><tr><td>Project Name</td><td>'+current.name+'</td></tr><tr><td>Longitiude</td><td>'+current.name+'</td></tr><tr><td>Latitiude</td><td>'+current.lat+'</td></tr></table>'
                    });
                } else {
                    infoBox.setOptions({
                        map: map,
                        content: '<table class="table"><tr><td>Project Name</td><td>'+current.name+'</td></tr><tr><td>Longitiude</td><td>'+current.name+'</td></tr><tr><td>Latitiude</td><td>'+current.lat+'</td></tr></table>'
                    });
                    infoBox.setPosition(this.getPosition());
                }
            });
        }

        });
    });

});

代码工作正常，直到显示信息框值，我试图通过使用 current.name current.lng 和 current.lat 获取每个点的纬度、经度和名称在信息框内容中为

content: '<table class="table"><tr><td>Project Name</td><td>'+current.name+'</td></tr><tr><td>Longitiude</td><td>'+current.name+'</td></tr><tr><td>Latitiude</td><td>'+current.lat+'</td></tr></table>'

但我在所有框中都得到了相同的 .name 、 .lng 和 .lat ？据我所知，我在

有一个循环

 for (var i = 0; i < data.length; i++) {
                var current = data[i];
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(current.lat, current.lng),
                    map: map,
                    content: current.content
                });

将 json 的经纬度值分配给标记，但似乎无法在此处访问！

yopu 能否告诉我如何解决此问题

Answer 1

使用函数闭包进行简单修复。将此代码替换为对 createMarker(current):

的调用

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(current.lat, current.lng),
    map: map,
    content: current.content
});

markers.push(marker);
var projName = data[i].name;
google.maps.event.addListener(markers[i], "click", function (e) {
  if (!infoBox) {
    infoBox = new InfoBox({
      latlng: this.getPosition(),
      map: map,
      content: '<table class="table"><tr><td>Project Name</td><td>'+current.name+'</td></tr><tr><td>Longitiude</td><td>'+current.name+'</td></tr><tr><td>Latitiude</td><td>'+current.lat+'</td></tr></table>'
    });
  } else {
    infoBox.setOptions({
      map: map,
      content: '<table class="table"><tr><td>Project Name</td><td>'+current.name+'</td></tr><tr><td>Longitiude</td><td>'+current.name+'</td></tr><tr><td>Latitiude</td><td>'+current.lat+'</td></tr></table>'
    });
    infoBox.setPosition(this.getPosition());
  }
});

其中 createMarker 是：

createMarker(current) {
  var marker = new google.maps.Marker({
      position: new google.maps.LatLng(current.lat, current.lng),
      map: map,
      content: current.content
  });

  markers.push(marker);
  var projName = current.name;
  google.maps.event.addListener(marker, "click", function (e) {
      if (!infoBox) {
          infoBox = new InfoBox({
              latlng: this.getPosition(),
              map: map,
              content: '<table class="table"><tr><td>Project Name</td><td>'+current.name+'</td></tr><tr><td>Longitiude</td><td>'+current.name+'</td></tr><tr><td>Latitiude</td><td>'+current.lat+'</td></tr></table>'
          });
      } else {
          infoBox.setOptions({
              map: map,
              content: '<table class="table"><tr><td>Project Name</td><td>'+current.name+'</td></tr><tr><td>Longitiude</td><td>'+current.name+'</td></tr><tr><td>Latitiude</td><td>'+current.lat+'</td></tr></table>'
          });
          infoBox.setPosition(this.getPosition());
      }
  });
}

关于访问 Google 地图信息窗口 (infoBox) 中的 JSON 值的问题

Issue on Accessing JSON Values in Google Maps Infowindow (infoBox)

infowindow

google-maps-api-3