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获取每个点lat，lng和name 在infoBox内容中

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
                });

将lat长值从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 Maps Infowindow中访问JSON值的问题（infoBox）

1 个答案: