百度地圖 自定義結果面板+分頁+圖層標注(標注點+搜索)
示例一：
<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="width:16%;height:25px" id="txtContent"> <input type="button" style="width:50px;height:25px" id="search" value="搜索" onclick="searchMap()"/> </div><br> <div> <div id="r-result" style="width:20%;float:left"></div> <div style="width: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="width: 100%; height: 100%"> <div class="head_top" style="width: 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; width: 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="width: 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;width: 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="width:280px;margin:0;line-height:20px;">市場名稱：' + markerArr[i].name + '</br>地址：' + markerArr[i].address + '</br> 電話：' + markerArr[i].contactPhone + '</p>'; //infoOther[i] = '<p style="width: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="width: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條的時候，加載相對應的圖片即可。
分頁和后台的交互這里……