读书人

快速的基于百度map的搜索功能实现(存

发布时间: 2012-10-29 10:03:53 作者: rapoo

快速的基于百度地图的搜索功能实现(存档)

1、结合前一篇的标注功能,以下可直接在搜索页面中添加一个DIV层的搜索功能

<div id="tools"  style="left:100px;top:5px;position: absolute;"><INPUT id=PoiSearch  name=word maxLength=256 ><SELECT NAME="field" ID="field"><OPTION VALUE="">---请选择---</OPTION><OPTION VALUE="land" SELECTED>地块</OPTION></SELECT>    <INPUT TYPE="button" VALUE="搜索" ONCLICK="search()"></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.png  http://openapi.baidu.com/map/images/custom_a_j.png  http://openapi.baidu.com/map/images/us_mk_icon.png  var 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[i].land_name;land_intro = rs[i].land_intro;var newPoint = new BMap.Point(rs[i].land_x, rs[i].land_y); // 创建点坐标    addMarker(newPoint, i);}}else{}map.addOverlay(polyline);//画定**区边界//百度地图的查询//var local = new BMap.LocalSearch(map, {//  renderOptions:{map: map}//});//local.search(searchStr);}</script>

?3、功能页面

快速的基于百度map的搜索功能实现(存档)

读书人网 >Web前端

热点推荐