用百度map api展示时空数据（七）--左侧列表打开信息窗口

最新推荐文章于 2023-06-27 16:42:34 发布

两鬓已不能斑白

最新推荐文章于 2023-06-27 16:42:34 发布

阅读量1k

点赞数

分类专栏： BMap 文章标签： ajax json 百度map api 信息窗口 li标签

本文链接：https://blog.csdn.net/u010429424/article/details/43018373

版权

BMap 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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