今天完成的功能:1、点击好友列表中的好友名字行后,页面显示地图并且在地图上显示该好友的位置。2、优化“地图”按钮选项,点击后切换到地图视图时自动将自己的位置标记点居中显示。除了弹窗的功能没有实现,基本完成了昨天日志中的计划的任务,并且对实现情况比较满意。

 

  期间遇到两个问题。其一:好友列表是JS操作DOM动态生成的,其中在<a>标记中加了一个class属性(class=”fnameclass”)。对其事件处理使用$(“.fnameclass”).click(function(){}的方式,发现根本就没有成功监听到事件。借助万能的Google,查到这种方式无法绑定动态生成的HTML元素,有一个livequery插件可以解决这种问题。但是我并没有采用这个插件,因为我想加入插件之后网页要加载更多的元素,影响移动端对网页的体验。继续Google后找到一个非常简单的Jquery API可以解决这问题,使用.live()方法。

.live() 方法能对一个还没有添加进DOM的元素有效,是由于使用了事件委托:绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。传递给 .live() 的事件处理函数不会绑定在元素上,而是把他作为一个特殊的事件处理函数,绑定在 DOM 树的根节点上。

  于是在我的JS代码中将其改成如下语句:$(“.fnameclass”).live(“click”,function(){}。在function函数中放一个alert方法测试,结果成功执行。

  第二个问题是:我的好友列表页中存的值是好友名字,而根据我的数据库的规划,好友名字是可以重复的值,只有UID和email是不允许重复的。那么,点击好友名字之后如何去查数据库以取得其坐标信息呢?现行的解决方法如下:以前点击导航栏中“好友”项后去数据库查的信息只有好友名字(返回的值是XML,ajax取得回应后再对其解析),现在增加一项uid。返回xml之后,先将uid循环解析存入数组中(fuidArray)。原先好友名字动态列表的一行是这样定义的:”<tr><td ><a class=\”fnameclass\” href=\”#\””>” + fname + “</a></td></tr>”,现在对其修改,在<a>标签中增加id属性,而id的值便是每个好友的uid。修改后的语句变成:”<tr><td ><a class=\”fnameclass\” href=\”#\” ” + “id=\”” + fuidArray[n] + “\”>” + fname + “</a></td></tr>”,这样一行行好友名字就有了各自的值为uid的id属性。之后点击某一个好友名字时,就可以用$(this).attr(“id”)这样的语句取得其id值并用其查询数据库,最终顺利得到坐标信息。

  查询到坐标信息并返回与解析之后,就可以用如下语句在地图上显示好友的最新位置标记点了:

fLocation = new google.maps.LatLng(latitude,longitude);

if(fMarker == null){

    fMarker = new google.maps.Marker({

position : fLocation,

map : map,

title : “susan”

});

}else{

    fMarker.setPosition(fLocation);

}map.setCenter(fLocation);

  明天下午要考英语六级,所以……就偷懒,不计划明天的编程工作了,随心所欲的编一些。