用百度map api展示时空数据（六）--实现关键字搜索

使用thinkphp，mysql 实现简单的基于百度map关键字搜索

首先是前端的HTML代码：

<div id="search">
    <form method="POST" id="search_form" action="__URL__/gis_keyword_search">
	搜索框：<input type="text" name="giskeyword" placeholder="请输入关键字"/>
 <span style="white-space:pre">	</span><input type="submit" value="搜索"/>
	<input type="button" id='close2' onclick="$('#searchlist').css('display','none');$('#close2').css('display','none')" style="display:none;" value="关闭"/>
    </form>
    <div id="searchresult"></div>
    <div id="searchlist"></div>	
</div>

gis_keyword_search()函数如下：

    function gis_keyword_search(){
    	$point_array = json_encode(keyword_search($_POST["giskeyword"])); //调用Common/common.php文件里面的keyword_search函数
    	$this->ajaxReturn($point_array,'查询成功',1);
    }

json_encode()是json编码函数，可以直接调用。

$this->ajaxReturn("要返回的数据","提示内容","状态")函数是thinkphp提供的返回ajax请求的函数。

keyword_search()函数如下：

/**
 * @函数	keyword_search
 * @功能	关键字查询
 */

function keyword_search($keyword){
	header("Content-Type:text/html; charset=utf-8");
		
	//实例化GIS模型
	$point = D('Point');	
	$selectsql = "SELECT timestamp,AsText(point),type,name,introduce,attention,score,uri FROM tb_point WHERE name LIKE '%$keyword%' ORDER BY AsText(point),timestamp DESC ";
	$point_list = $point->query($selectsql);

	//查询结果数
	$count = count($point_list); 
	$point_array = array();
	$num = 1; $k = 0;
	for($i=0;$i<$count;$i++){
		$point_list[$i]['introduce'] = json_decode($point_list[$i]['introduce'],true);
		$point_list[$i]['text'] = $point_list[$i]['introduce']['text'];
		$point_list[$i]['picture'] = $point_list[$i]['introduce']['picture'];
			
		if($point_list[$i]['AsText(point)'] == $point_list[$i+1]['AsText(point)']){
			$num++;continue;
		}else{
			for($j=0;$j<$num;$j++){
				$t = $i-$num+1+$j;
				$point_array[$k][$j] = array(
						"point" => 	$point_list[$t]['AsText(point)'],
						"timestamp" => $point_list[$t]['timestamp'],
						"name" => $point_list[$t]['name'],
						"text" => $point_list[$t]['text'],
						"picture" => $point_list[$t]['picture'],						
				);
			}
			$num = 1;$k++;
		}
	}
	return ($point_array);	
}

我的tb_point表如下：

DROP TABLE IF EXISTS `tb_point`;
CREATE TABLE `tb_point` (
  `timestamp` date NOT NULL COMMENT '时间戳',
  `point` point NOT NULL COMMENT '经纬度',
  `type` char(20) character set utf8 default '' COMMENT '点类型',
  `name` varchar(50) character set utf8 NOT NULL COMMENT '点名称',
  `introduce` text character set utf8 COMMENT '介绍，包含文字、视频、目录，json格式',
  `attention` int(5) NOT NULL default '0' COMMENT '关注人数',
  `score` tinyint(2) NOT NULL default '0' COMMENT '评分，用于协同过滤推荐',
  `status` tinyint(2) NOT NULL default '2' COMMENT '状态，用于管理员添加',
  `uri` varchar(255) character set utf8 default NULL COMMENT '维基uri',
  PRIMARY KEY  (`timestamp`,`point`(25)),
  KEY `index_timestamp` USING BTREE (`timestamp`),
  KEY `index_name` USING HASH (`name`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

其中introduce的类型是text，在使用时以json格式来使用。tb_point表部分截图如下：

/*
 * ajax代码模块
 */

marker = new Array();
point = new Array();
infoWindow = new Array();
infocontent = new Array();
li_length = 0;

$(function(){
    //搜索结果栏
    $('#search_form').ajaxForm({
        success:  search_complete,  // post-submit callback
        dataType: 'json'
    });
    function search_complete(data){
        if (data.status==1){
        	map.clearOverlays();
        	point_array = eval("("+data.data+")"); //解析服务器端返回的JSON字符串
			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++){
	        	
	        		content += "<li id="+(i+1)+">" + (i+1) + " " + point_array[i][0]['name'] + "</li>" ;
	        		
	        		//获得经纬度 
	        		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);
					infocontent[i] = "<div id='infocontent'>";
					for(var key in point_array[i]){
						//添加信息窗口
						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/>" ;
					}
					infocontent[i] += "</div>";
					addClickHandler(infocontent[i],marker[i],i);
	        	}
	        	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;
		   infoWindow[k] =  new BMap.InfoWindow(infocontent[k],opts);
		   map.openInfoWindow(infoWindow[k],point[k]); //开启信息窗口
	});
	$("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){
	infoWindow[i] =  new BMap.InfoWindow(content,opts);
	map.openInfoWindow(infoWindow[i],point[i]); //开启信息窗口
}

实现的效果如下图所示：

搜索结果以<ul><li></li></ul>标签来显示。当鼠标滑动到左侧搜索结果时，在地图的信息窗口展示相应的信息。