boss最近要求我实现关键字查询功能,我就试了一下。
其中要实现鼠标移动到左侧结果列表,就能打开对应的信息窗口这一功能。
思想很简单,就是要保证左侧结果列表与信息窗口能一一对应。用数组即可。
在代码中,point_array是解析JSON字符串后的结果,是一个二维数组,通过for循环来进行在百度地图上添加marker、label、infoWindow。通过函数addClickHander来实现单击marker时的触发函数。在这个过程中,我简单修改了百度map api提供的示例DEMO,增加了一个参数i,正是这个i使得左侧列表与信息窗口能一一对应。
其中,如何添加marker和label,在百度map api的示例DEMO里有详细的说明。
具体实现方法如下:
/* * ajax代码模块 */ <span style="color:#ff0000;">marker = new Array(); point = new Array(); infoWindow = new Array(); infocontent = new Array(); li_length = 0;</span> $(function(){ //搜索结果栏 $('#search_form').ajaxForm({ success: search_complete, // post-submit callback dataType: 'json' }); function search_complete(data){ if (data.status==1){ map.clearOverlays(); <span style="color:#ff0000;">point_array = eval("("+data.data+")"); //解析服务器端返回的JSON字符串</span> li_length = point_array.length; if(point_array.length == 0){ var content = "还没有该点<a href='http://127.0.0.1/gisproject/home/Tpl/Index/addpoi.html' target='_BLANK' >我来添加</a>"; }else{ var content = "<ul>"; for(var i=0;i<point_array.length;i++){ <span style="color:#ff0000;">content += "<li id="+(i+1)+">" + (i+1) + " " + point_array[i][0]['name'] + "</li>" ;</span> //获得经纬度 var index1 = point_array[i][0]['point'].indexOf("("); var index2 = point_array[i][0]['point'].indexOf(" "); var index3 = point_array[i][0]['point'].indexOf(")"); var longitude = point_array[i][0]['point'].substring(index1+1,index2); var latitude = point_array[i][0]['point'].substring(index2+1,index3); //添加地图标注点 point[i] = new BMap.Point(longitude,latitude); marker[i] = new BMap.Marker(point[i]); // 创建标注 map.addOverlay(marker[i]); //添加Label var label = new BMap.Label(point_array[i][0]['name'],{offset:new BMap.Size(20,-10)}); marker[i].setLabel(label); <span style="color:#ff0000;">infocontent[i] = "<div id='infocontent'>";</span> for(var key in point_array[i]){ <span style="color:#ff0000;">//添加信息窗口 infocontent[i] += point_array[i][0]['name'] + "<br/>" + point_array[i][key]['timestamp'].substring(0,4) + "<br/>" + "<img src="+point_array[i][key]['picture']+" width='200px' height='120px'>" + point_array[i][key]['text'] + "<br/>" ;</span> } <span style="color:#ff0000;">infocontent[i] += "</div>"; addClickHandler(infocontent[i],marker[i],i);</span> } content +="</ul>"; } $('#searchlist').css("height","100px"); $('#searchlist').css("width","250px"); $('#searchlist').html(content).show(); $('#close2').css("display",""); addEvent(); }else{ $('#searchresult').html(data.info).show(); } } }); function addEvent(){ $("li").mouseover(function(){ $(this).css("background-color","#CECECE"); var k = this.id-1; <span style="color:#ff0000;"> infoWindow[k] = new BMap.InfoWindow(infocontent[k],opts); map.openInfoWindow(infoWindow[k],point[k]); //开启信息窗口</span> }); $("li").mouseout(function(){ $(this).css("background-color","#FFFFFF"); }); }; var opts = { width : 100, // 信息窗口宽度 height: 300, // 信息窗口高度 title: '信息窗口', enableMessage:false//设置允许信息窗发送短息 }; function addClickHandler(content,marker,i){ marker.addEventListener("click",function(e){ openInfo(content,e,i); }); } function openInfo(content,e,i){ <span style="color:#ff0000;">infoWindow[i] = new BMap.InfoWindow(content,opts); map.openInfoWindow(infoWindow[i],point[i]); //开启信息窗口</span> }