百度地图 自定义结果面板+分页+图层标注(标注点+搜索)
示例一：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=F5dadeb87de65231081fe88229c124e2"></script> <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script> <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" /> <style type="text/css"> body, html{width: 100%;height: 100%; margin:0;font-family:"微软雅黑";} #r-result{width:20%;height:90%} #map{height:100%;width:79.9%;} </style> </head> <body> <div> <input type="text" onkeypress="EnterPress()" style="16%;height:25px" id="txtContent"> <input type="button" style="50px;height:25px" id="search" value="搜索" onclick="searchMap()"/> </div><br> <div> <div id="r-result" style="20%;float:left"></div> <div style="79.9%;float:right;" id="map"></div> </div> </body> </html> <script type="text/javascript"> var markerArr = [ { title: "名称：广州火车站", point: "113.264531,23.157003", address: "广东省广州市广州火车站", tel: "12306" }, { title: "名称：广州塔（赤岗塔）", point: "113.330934,23.113401", address: "广东省广州市广州塔（赤岗塔） ", tel: "18500000000" }, { title: "名称：广州动物园", point: "113.312213,23.147267", address: "广东省广州市广州动物园", tel: "18500000000" }, { title: "名称：天河公园", point: "113.372867,23.134274", address: "广东省广州市天河公园", tel: "18500000000" } ]; function map_init(e) { var map = new BMap.Map("map"); // 创建Map实例 var point = new BMap.Point(113.312213, 23.147267); //地图中心点，广州市 map.centerAndZoom(point, 13); // 初始化地图,设置中心点坐标和地图级别。 map.enableScrollWheelZoom(true); //启用滚轮放大缩小 //地图、卫星、混合模式切换 map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP]})); //向地图中添加缩放控件 var ctrlNav = new window.BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE }); map.addControl(ctrlNav); //向地图中添加缩略图控件 var ctrlOve = new window.BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1 }); map.addControl(ctrlOve); //向地图中添加比例尺控件 //var ctrlSca = new window.BMap.ScaleControl({ // anchor: BMAP_ANCHOR_BOTTOM_LEFT //}); // map.addControl(ctrlSca); var point = new Array(); //存放标注点经纬信息的数组 var marker = new Array(); //存放标注点对象的数组 var info = new Array(); //存放提示信息窗口对象的数组 var searchInfoWindow =new Array();//存放检索信息窗口对象的数组 for (var i = 0; i < markerArr.length; i++) { var p0 = markerArr[i].point.split(",")[0]; // var p1 = markerArr[i].point.split(",")[1]; //按照原数组的point格式将地图点坐标的经纬度分别提出来 point[i] = new window.BMap.Point(p0, p1); //循环生成新的地图点 marker[i] = new window.BMap.Marker(point[i]); //按照地图点坐标生成标记 map.addOverlay(marker[i]); marker[i].setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画 var label = new window.BMap.Label(markerArr[i].title, { offset: new window.BMap.Size(20, -10) }); //marker[i].setLabel(label); // 创建信息窗口对象 info[i] = "<p style=’font-size:12px;lineheight:1.8em;’>" + "</br>地址：" + markerArr[i].address + "</br> 电话：" + markerArr[i].tel + "</br></p>"; //创建百度样式检索信息窗口对象 searchInfoWindow[i] = new BMapLib.SearchInfoWindow(map, info[i], { title : markerArr[i].title, //标题 width : 290, //宽度 height : 55, //高度 panel : "panel", //检索结果面板 enableAutoPan : true, //自动平移 searchTypes :[ BMAPLIB_TAB_SEARCH, //周边检索 BMAPLIB_TAB_TO_HERE, //到这里去 BMAPLIB_TAB_FROM_HERE //从这里出发 ] }); //添加点击事件 marker[i].addEventListener("click", (function(k){ // js 闭包 return function(){ //map.centerAndZoom(point[k], 18); //marker[k].openInfoWindow(info[k]); searchInfoWindow[k].open(marker[k]); } })(i) ); } var local = new BMap.LocalSearch(map, { renderOptions: {map: map, panel: "r-result"} }); local.search(e); } //异步调用百度js function map_load() { var load = document.createElement("script"); load.src = "http://api.map.baidu.com/api?v=2.0&ak=IDvNBsejl9oqMbPF316iKsXR&callback=map_init"; document.body.appendChild(load); } //按输入的内容进行搜索 function searchMap(){ var content=document.getElementById("txtContent").value; map_init(content); } //键盘回车事件 function EnterPress(){ if(event.keyCode == 13){ searchMap(); //调用输入框搜索事件 } } window.onload = map_load; </script>
示例二：
52个市场注册的时候可以填写经纬度来标注地理位置，这样后台就可以拿到这些地理位置进行描点标注。显示到前台的时候要显示到左侧栏，并将这些结果进行 分页显示。如果每页显示10条的话，这10条要以红色ABC来显示，剩余42个市场要以粉色的标注显示，并且点击这些标注要能直接定位。
最后的成型图是这样的：
做法很简单，步骤如下：
1.根据数据库中的经纬度描点，经纬度在后台可以通过转换json放到action上下文，前台用隐藏标签来绑定该值。我在这里是有两个放到上下文中，一个是当前10页，一个是后面的42个;
2.左边是一个Table，绑定的是当前10页的值，根据分页来传递参数获取值绑定到前台隐藏控件中；
3.组合起来就是上面的地图显示。
前台html代码
<body onload="map_init()"> <div style=" 100%; height: 100%"> <div class="head_top" style=" 100%; height: 7%; margin: 0px;"> <div class="head"> <div class="hd_logo"> <img style="padding-top: 13px; margin-left:-260px;padding-right:200px;" src="${pageContext.request.contextPath}/images/hl_logo.png" width="402" height="24" align="left" /> </div> <div class="hl_menu"> <ul> <li> <a href="factoryTicketNumber_home.action"><span class="Men_text"><img src="${pageContext.request.contextPath}/images/home.png" width="13" height="11" align="middle" /> 首页</span> </a> </li> <li class="active"> <a href="market_testmap.action"><span class="Men_text"><img src="${pageContext.request.contextPath}/images/dt2.png" width="11" height="15" align="middle" /> 地图</span> </a> </li> <li> <a href="purchaseinfoAction_publicdailyTrading.action"><span class="Men_text"><img src="${pageContext.request.contextPath}/images/gwc.png" width="13" height="11" align="middle" /> 每日交易</span> </a> </li> </ul> </div> </div> </div> <div style="clear:both"></div> <div id="r-result" style="overflow-y: scroll; 19.9%, height:80%; float: left"> <form action="market_testmap.action" method="post"> <table class="table table-bordered table-striped" height="80%" style="border-collapse: collapse; border: none; font-size: 13px"> <tbody id="TableData" class="dataContainer" datakey="factoryList"> <s:iterator value="recordList" id="list" status="status"> <tr class="TableDetail1 template"> <td style="padding: 5px 10px;"> <div> <img height="25px" src="${pageContext.request.contextPath}/images/mapimage/${status.count}.png" /> <a href="#" value="${list[0]}" onclick="showInfoWindow(this)">${list[0]}</a> <!-- onclick="searchName(this) --> </div> <div> 地址：${list[1]} </div> <div> 电话：${list[3]} </div> </td> </tr> </s:iterator> </tbody> </table> </form> <%@ include file="/WEB-INF/common/pageViewMap.jspf"%> </div> <div style=" 80%, height : 80%; float: right;" id="map"></div> <div style="clear:both"> <input type="hidden" id="txtContent"> <s:hidden name="mapValue" id="mapValue" /> <s:hidden name="mapOtherValue" id="mapOtherValue" /> </div> <div style="clear:both; 100%; height: 5%; background: #171717; text-align: center; float: left; line-height: 35px;"> <a class="aa">关于我们</a><a class="aa">联系我们</a><a class="aa">隐私权和使用条例</a><a class="aa">服务</a><a class="aa">反馈</a> </div> </div> </body>
这里在<body>标签中用onload事件，这样可以在dom加载成功后加载JS事件，可以绑定到隐藏控件的值。$().ready()则不显示数据，具体区别可以去百度一下看看。
<script type="text/javascript"> function gotoPage( pageNum ){ $(document.forms[0]).append("<input type='hidden' name='pageNum' value='" + pageNum +"'/>"); document.forms[0].submit(); } function map_init(e) { var markerArr = document.getElementById("mapValue"); //这里是当前页的 Json markerArr =eval(markerArr.value); var markerArrOther =document.getElementById("mapOtherValue"); //这里获取的是剩余的 地图Json markerArrOther =eval(markerArrOther.value); var map = new BMap.Map("map"); // 创建Map实例 var point = new BMap.Point(116.302771, 39.963603); //地图中心点，海淀区 map.centerAndZoom(point, 14); // 初始化地图,设置中心点坐标和地图级别。 map.enableScrollWheelZoom(true); //启用滚轮放大缩小 //地图、卫星、混合模式切换 map.addControl( new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]})); //向地图中添加缩放控件 var ctrlNav = new window.BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE }); map.addControl(ctrlNav); //向地图中添加缩略图控件 var ctrlOve = new window.BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1 }); map.addControl(ctrlOve); //添加全景 控件 var stCtrl = new BMap.PanoramaControl(); //构造全景控件 stCtrl.setOffset(new BMap.Size(40, 40)); map.addControl(stCtrl);//添加全景控件 //向地图中添加比例尺控件 var ctrlSca = new window.BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT }); map.addControl(ctrlSca); var point = new Array(); //存放标注点经纬信息的数组 var marker = new Array(); //存放标注点对象的数组 var info = new Array(); //存放提示信息窗口对象的数组 var searchInfoWindow =new Array();//存放检索信息窗口对象的数组 var pointOther =new Array(); //同上 一样，只不过这里是剩余的查看 Json数组 var markerOther =new Array(); var infoOther =new Array(); var searchInfoWindowOther =new Array(); for (var i = 0; i < markerArr.length; i++) { var p0 = markerArr[i].longitude; // var p1 = markerArr[i].latitude; //按照原数组的point格式将地图点坐标的经纬度分别提出来 point[i] = new window.BMap.Point(p0, p1); //循环生成新的地图点 var iconImg = new BMap.Icon('${pageContext.request.contextPath}/images/mapimage/'+(i+1)+'.png', new BMap.Size(32, 47), { anchor: new BMap.Size(10, 30) }); marker[i] = new window.BMap.Marker(point[i],{icon:iconImg}); //按照地图点坐标生成标记 map.addOverlay(marker[i]); var label = new window.BMap.Label(markerArr[i].name, { offset: new window.BMap.Size(20, -10) }); // 创建信息窗口对象 info[i] = '<p style="280px;margin:0;line-height:20px;">市场名称：' + markerArr[i].name + '</br>地址：' + markerArr[i].address + '</br> 电话：' + markerArr[i].contactPhone + '</p>'; //infoOther[i] = '<p style="280px;margin:0;line-height:20px;">市场名称：' + markerArrOther[i].name + '</br>地址：' + markerArrOther[i].address + '</br> 电话：' + markerArrOther[i].contactPhone + '</p>'; //创建百度样式检索信息窗口对象 searchInfoWindow[i] = new BMapLib.SearchInfoWindow(map, info[i], { title : markerArr[i].name, //标题 width : 290, //宽度 height : 55, //高度 panel : "panel", //检索结果面板 enableAutoPan : true, //自动平移 searchTypes :[ BMAPLIB_TAB_SEARCH, //周边检索 BMAPLIB_TAB_TO_HERE, //到这里去 BMAPLIB_TAB_FROM_HERE //从这里出发 ] }); //判断当前点击的是否有数据 if(e!="" && e== markerArr[i].name ){ searchInfoWindow[i].open(marker[i]); } //添加点击事件 marker[i].addEventListener("click", (function(k){ // js 闭包 return function(){ searchInfoWindow[k].open(marker[k]); } })(i) ); } //从这里写新的Json for (var i = 0; i < markerArrOther.length; i++) { var p0 = markerArrOther[i].longitude; // var p1 = markerArrOther[i].latitude; //按照原数组的point格式将地图点坐标的经纬度分别提出来 pointOther[i] = new window.BMap.Point(p0, p1); //循环生成新的地图点 var iconImgOther = new BMap.Icon('${pageContext.request.contextPath}/images/mapimage/11.png', new BMap.Size(20, 30), { anchor: new BMap.Size(10, 30) }); markerOther[i] = new window.BMap.Marker(pointOther[i],{icon:iconImgOther}); //按照地图点坐标生成标记 map.addOverlay(markerOther[i]); var labelOther = new window.BMap.Label(markerArrOther[i].name, { offset: new window.BMap.Size(20, -10) }); // 创建信息窗口对象 infoOther[i] = '<p style="280px;margin:0;line-height:20px;">市场名称：' + markerArrOther[i].name + '</br>地址：' + markerArrOther[i].address + '</br> 电话：' + markerArrOther[i].contactPhone + '</p>'; //创建百度样式检索信息窗口对象 searchInfoWindowOther[i] = new BMapLib.SearchInfoWindow(map, infoOther[i], { title : markerArrOther[i].name, //标题 width : 290, //宽度 height : 55, //高度 panel : "panel", //检索结果面板 enableAutoPan : true, //自动平移 searchTypes :[ BMAPLIB_TAB_SEARCH, //周边检索 BMAPLIB_TAB_TO_HERE, //到这里去 BMAPLIB_TAB_FROM_HERE //从这里出发 ] }); //添加点击事件 markerOther[i].addEventListener("click", (function(k){ // js 闭包 return function(){ searchInfoWindowOther[k].open(markerOther[k]); } })(i) ); } } //异步调用百度js function map_load() { var load = document.createElement("script"); load.src = "http://api.map.baidu.com/api?v=2.0&ak=IDvNBsejl9oqMbPF316iKsXR&callback=map_init"; document.body.appendChild(load); } //显示信息弹框 function showInfoWindow(obj){ var a = $(obj).attr('value'); document.getElementById("txtContent").value=a; map_init(a); } </script>
JS中加载的图片标注是提前将图片设置为1，2...这些数字，当循环的当前10条的时候，加载相对应的图片即可。
分页和后台的交互这里……