快速的基于百度地图的搜索功能实现（存档）
1、结合前一篇的标注功能，以下可直接在搜索页面中添加一个DIV层的搜索功能<div id="tools"style="left:100px;top:5px;position: absolute;"><INPUT id=PoiSearchname=word maxLength=256 ><SELECT NAME="field" ID="field"><OPTION VALUE="">---请选择---</OPTION><OPTION VALUE="land" SELECTED>地块</OPTION></SELECT> <INPUT TYPE="button" VALUE="搜索" ></div>
2、并在地图初始化脚本区中，添加搜索方法，以有结合业务搜索结果数据标注到地图上
//初始化地图参数........var land_name = "";var land_intro = "";/* * 展示地块窗口，并把地图中心位置移动到相应位置 */function markCurrentLand(point,marker,isopen){/*var opts = { width : 350, // 信息窗口宽度 height: 150, // 信息窗口高度 title : land_name// 信息窗口标题}*///已成功标注到地图，显示信息到地图var sContent ="<h4 style='margin:0 0 5px 0;padding:0.2em 0'>"+land_name+"</h4>" + "<img style='float:right;margin:4px' id='imgDemo' src='images/gongshuRMZFBuilding.jpg' width='139' height='104' title='**区'/>" +"<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>用地性质:出让面积:地块介绍:"+land_intro+"</p>" +"</div>";//var infoWindow = new BMap.InfoWindow(sContent,opts);// 创建信息窗口对象var infoWindow = new BMap.InfoWindow(sContent);// 创建信息窗口对象map.addOverlay(marker); //添加图标if(isopen){setTimeout(function(){map.panTo(point); //移动到当前对象map.openInfoWindow(infoWindow, point); // 打开信息窗口}, 1000);}marker.addEventListener("click", function(){ this.openInfoWindow(infoWindow);//图片加载完毕重绘infowindow document.getElementById('imgDemo').onload = function (){ infoWindow.redraw(); }});}//编写自定义函数,创建标注function addMarker(point, index){//比如一些自定义图片http://api.map.baidu.com/img/markers.pnghttp://openapi.baidu.com/map/images/custom_a_j.pnghttp://openapi.baidu.com/map/images/us_mk_icon.pngvar myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), { offset: new BMap.Size(10, 25), // 指定定位位置 imageOffset: new BMap.Size(0, 0 - index * 25) // 设置图片偏移});var marker = new BMap.Marker(point, {icon: myIcon});map.addOverlay(marker);markCurrentLand(point,marker,false);}/* * 本地搜索 定位 */function search(){ var searchStr = document.getElementById("PoiSearch").value;var type = document.getElementById("field").value;var act = "";if(type=="land"){act="getLandByName";}//业务表的查询//通过UCAP应用平台(或其它第三方AJAX框架获取数据)，到数据库中更新位置var rs = parent.bdgUtil.synchronization("type="+type+"&act="+act+"&searchStr="+searchStr);map.clearOverlays();//清除所有覆盖物if(rs&&rs.length>=1){for(var i=0;i<rs.length;i++){land_name = rs.land_name;land_intro = rs.land_intro;var newPoint = new BMap.Point(rs.land_x, rs.land_y); // 创建点坐标 addMarker(newPoint, i);}}else{}map.addOverlay(polyline);//画定**区边界//百度地图的查询//var local = new BMap.LocalSearch(map, {//renderOptions:{map: map}//});//local.search(searchStr);}</script> 3、功能页面
http://dl.iteye.com/upload/attachment/465706/4fda2f35-ae0b-3dcb-8441-c7a88cd8aa30.jpg
页:
[1]