Question

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

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

第一个问题：对于标记，我添加了一个事件监听器，以便能够显示信息窗口。我使用标记的标题来检索朋友的信息...这只是一个愚蠢的工具，因为“id”在检索朋友的ajax方法中是未知的。这是我的第一个问题。我希望能够使用标题作为真正的标题（而不是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.title来获取id。

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

3 个答案: