变量范围：在回调函数中看不到

Question

基本上，我有几个想要交的朋友：
- 在地图上查看
- 在表格中列出

我在朋友列表上有一个循环，每次迭代我：
- 创建谷歌地图标记
- 在列表中添加朋友

第一个问题：对于标记，我添加了一个事件侦听器以便能够显示信息窗口。我使用标记的标题来检索朋友的信息......这只是一个愚蠢的解决方法，因为在检索朋友的 ajax 方法中不知道“id”。这是我的第一个问题。我希望能够将 title 用于真实标题（不是 id）并设法以另一种方式在 ajax 回调中获取 id。

第二个问题 对于列表，我为每个朋友添加一个“li”条目，并在 li.a 链接上添加一个事件侦听器，以便能够显示朋友的详细信息。也没有看到“id”。

这两个问题是同族的。

下面是我完成的代码。显然出了点问题，但无法弄清楚我需要更改什么才能在回调函数中访问 id。

注意：我将 jquery mobile 用于 HTML5 应用程序。

for(j=0;j<friends.length;j++){
      var lat = friends[j][1];
      var long = friends[j][2];
      var id = friends[j][3];
      var latLng = new google.maps.LatLng(lat,long);
      var marker = new google.maps.Marker({ position: latLng,
                               map: map,
                               title: id
                              });

      // Add friends to list
      $("#friend_list ul").append('<li><a id="details' + id + '" rel="external" data-transition="slide">' + id + '</a></li>');

      // Add event handler when details:id is clicked
      $('#details' + id).click(function(){
        alert(id + ' clicked');   // DOES NOT WORK AS ID IS NOT KNOWN IN THIS METHOD
      });

      // Add listener on click action for marker created above
      // I PASS THE TITLE OF SELF AS ID IS NOT KNOWN IN THIS METHOD
      // IF I use: url: "/friend/" + id => ONLY THE LAST VALUE OF THE ID IS TAKEN INTO ACCOUNT 
      google.maps.event.addListener(marker, 'click', function() {
        self = this;
        $.ajax({
          url: "/friend/" + self.title,  
          success: function(details){
            var message = details["lastname"] + ' ' + details["firstname"];
            var infowindow = new google.maps.InfoWindow(
              { content: message,
                size: new google.maps.Size(50,50)
              }
            );
            infowindow.open(map,self);
          }
        });
      });
    }

知道什么地方出了问题吗？

Answer 1

//Here is how the ids can be picked off of the list items when clicked:
//...your..loop
var id = friends[j][3];

$('#friendlist').append('<li><a href="#" id="details'+ id +'">Friend</a></li>')
$('#details'+id).click(function() { alert(this.id.replace('details',''))})

//and for the gmarker:
var latLng = new google.maps.LatLng(lat,long);
var gmarker = new google.maps.Marker({ position: latLng,title: 'desired title here' });

//then create a secondary id for the marker -- sort of hash?
//simple case - each marker has unique latlng, so just concat them n do:
//based on Marino Šimić's trick
document[''+lat+''+long] = id

GEvent.addListener(gmarker, "click", function(marker, latlng) {
    alert('marker id:'+document[''+latlng.lat()+''+latlng.lng()] ) //your desired id here
});

//and then add the marker to the map
map.addOverlay(gmarker);

Answer 2

我没有完整阅读你的问题，因为我需要快点，但是

文档对象在范围内始终可见

如果你使用

 document["something"] = id;

您将能够获得

var something = document["something"];

从任何地方

将所有内容都包含在文档对象中并不是一个好的设计决策，而是让您知道；）

Answer 3

marker 不是谷歌地图标记的变量吗？

所以你应该可以访问 marker.title 来获取 id。