百度地圖簡要demo--關鍵字查詢，點定位
阿新 • • 發佈：2018-11-20
主要的js：var map; var zoom = 13; //設定初始的地圖顯示級別 var localsearch; //定義搜尋物件 var mapclick; //定義手動標註物件 var markerPoint; var loadingGisSearchBox;//遮罩 var markerArray=new Array(); /** * @Description:地圖初始化 * @author:pzx * @date:2015/05/27 */ function onLoad() { var key='BCTHLO5T1L0xGkPyv3sGHDOFqww6H3LB'; map = new BMap.Map("mapDiv",{ renderOptions: { map: map, //panel: "results",//結果容器id autoViewport: true, //自動結果標註 selectFirstResult: false //不指定到第一個目標 }, enableMapClick: false, }); // 建立地圖例項 var point = new BMap.Point(102.71619, 25.05151); // 建立點座標 map.centerAndZoom(point, zoom); // 初始化地圖，設定中心點座標和地圖級別 map.setCenter(point); /* var geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition(function(r){ if(this.getStatus() == BMAP_STATUS_SUCCESS){ var mk = new BMap.Marker(r.point); map.addOverlay(mk); map.panTo(r.point); debugger; markPointShowWin(r.point.lng, r.point.lat, r.address.city); } else { alert('failed'+this.getStatus()); } },{enableHighAccuracy: true})*/ map.setDefaultCursor("crosshair"); map.enableScrollWheelZoom(); //啟用滾輪放大縮小，預設禁用 map.enableContinuousZoom(); //啟用地圖慣性拖拽，預設禁用 map.addControl(new BMap.NavigationControl()); //新增預設縮放平移控制元件 //map.addControl(new BMap.OverviewMapControl()); //新增預設縮略地圖控制元件 map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP,BMAP_HYBRID_MAP]}));// 地圖型別 //定位按鈕 var geolocationControl = new BMap.GeolocationControl({ anchor:BMAP_ANCHOR_BOTTOM_RIGHT }); geolocationControl.addEventListener("locationSuccess", function(e){ // 定位成功事件 var address = ''; address += e.addressComponent.province; address += e.addressComponent.city; address += e.addressComponent.district; address += e.addressComponent.street; address += e.addressComponent.streetNumber; var mk = new BMap.Marker(e.point); map.addOverlay(mk); map.panTo(e.point); markPoint(e.point.lng, e.point.lat, address); }); geolocationControl.addEventListener("locationError",function(e){ // 定位失敗事件 alert(e.message); }); map.addControl(geolocationControl); preMarker=''; localSearch = new BMap.LocalSearch(map,{ renderOptions: { map: map, //panel: "results",//結果容器id autoViewport: true, //自動結果標註 selectFirstResult: false //不指定到第一個目標 }, pageCapacity : 10, // 每頁顯示的數量 onMarkersSet:function(pois){ for(var i=0;i<pois.length;i++){ (function(){ var index=i; var curPoi=pois[i]; var curMarker=pois[i].marker; markerArray[i]=curMarker; content="<h3>"+curPoi.title+"</h3>"; content+="<div>地址:"+curPoi.address+"</div>"; content+='<form action="around.php" method="post">經度：'+curPoi.point.lng+'</br>緯度：'+curPoi.point.lat+'</br><input type="button" onClick=returnResult("'+curPoi.point.lng+'","'+curPoi.point.lat+'","'+curPoi.address+'") value="選取當前位置"></form>'; curMarker.addEventListener('click',function(event){ //showAtrributes(event); var info=new BMap.InfoWindow(content); curMarker.openInfoWindow(info); var position=curMarker.getPosition(); }); })(); } }, //自定義搜尋回撥資料 onSearchComplete:function(results){ if(localSearch.getStatus() == BMAP_STATUS_SUCCESS){ // 清空地圖及搜尋列表 clearAll(); //結果列表 pois(results); } } } // 接收資料的回撥函式 ); } /** * @Description:根據城市和關鍵字查詢地址和經緯度 * @author:pzx * @date:2015/05/27 */ function searchAddr() { map.clearOverlays();//清空原來的標註 var keyword = mini.get('keyWord').getValue(); if(keyword!=null){ localSearch.search(keyword); } } /** * @Description:解析點資料結果 * @author:tianditu * @date:2015/05/27 * @param obj:查詢返回的結果資料，包含POI點資訊 */ function pois(obj) { if (obj) { // 顯示搜尋列表 var divMarker = document.createElement("div"); // 座標陣列，設定最佳比例尺時會用到 var zoomArr = []; for (var i = 0; i < obj.getCurrentNumPois(); i++) { // 閉包 (function(i) { var poi=obj.getPoi(i); // POI點名稱 var name = poi.title; // 地址 var address = poi.address; // 座標 var lng = poi.point.lng; var lat = poi.point.lat; //var lnglat = new window.BMap.Point(lng, lat); var lnglat = poi.point; //需要顯示在地圖上面的資訊，可以是html格式 /*var winHtml = "經度：" + lng + "</br>緯度：" + lat + " </br>地址:" + address+"</br><input type='button' onClick=returnResult("+lng+","+lat+",'"+address+"') value='選取該點'/>";*/ var winHtml = ""; winHtml="<h3>"+name+"</h3>"; winHtml+="<div>地址:"+address+"</div>"; winHtml+='<form action="around.php" method="post">經度：'+lng+'</br> 緯度：'+lat+'</br><input type="button" onClick=returnResult('+lng+','+lat+',"'+address+'") value="選取該點"/></form>'; // 建立標註物件 var marker = new BMap.Marker(lnglat); // 地圖上新增標註點 map.addOverlay(marker); // 註冊標註點的點選事件 marker.addEventListener("click", function () { var info=new BMap.InfoWindow(winHtml); this.openInfoWindow(info); info.setTitle(name); }); zoomArr.push(lnglat); // 在頁面上顯示搜尋的列表 var bYposition=2-i*20; var a = document.createElement("a"); a.href = "javascript://"; a.innerHTML = "<span style='background:url(http://api.map.baidu.com/bmap/red_labels.gif) 0 "+bYposition+"px no-repeat;padding-left:10px;margin-right:3px'></span>" + "<span style='color:#00c;text-decoration:underline'><b>"+name+"</b></span>"; //搜尋結果的單擊事件，單擊在地圖上定位並顯示詳細資訊 a.onclick = function() { showPosition(marker, name, winHtml); } //搜尋結果的雙擊事件，雙擊把經緯度和地址資訊返回到頁面 a.ondblclick = function() { returnResult(lng,lat, address); } //拼接查詢結果列表 divMarker.appendChild(document.createTextNode((i + 1) + ".")); divMarker.appendChild(a); divMarker.appendChild(document.createElement("br")); })(i); } // 顯示地圖的最佳級別 map.setViewport(zoomArr); // 顯示搜尋結果 divMarker.appendChild(document.createTextNode('共' + obj.getNumPois() + '條記錄，分' + obj.getNumPages() + '頁,當前第' + (parseInt(obj.getPageIndex())+1) + '頁')); document.getElementById("searchDiv").appendChild(divMarker); document.getElementById("resultDiv").style.display = "block"; }else{ document.getElementById("searchDiv").innerHTML="<strong>沒有搜尋到相關結果。</strong>"; document.getElementById("searchDiv").style.display = "block"; document.getElementById("resultDiv").style.display = "block"; } } /** * @Description：顯示查詢結果定位和詳細資訊 * @author:pzx * @date:2015/05/27 * @param:marker 在地圖上顯示的影象標註 * @param:title 彈出資訊框的標題 * @param:winHtml 彈出資訊框的內容 */ function showPosition(marker, title, winHtml) { var info=new BMap.InfoWindow(winHtml); marker.openInfoWindow(info); info.setTitle(name); } /** * @Description：根據經緯度資訊在地圖上做標註 * @author:pzx * @date:2015/05/27 * @param:lng 經度 * @param:lat 緯度 * @name:POI點名稱 */ function markPoint(lng, lat, name) { var lnglat = new window.BMap.Point(lng, lat); // 建立標註物件 markerPoint = new BMap.Marker(lnglat); // 地圖上新增標註點 map.addOverlay(markerPoint); //var winHtml = "經度：" + lng + "，緯度：" + lat; var winHtml = ""; //winHtml="<h3>"+name+"</h3>"; //winHtml+="<div>地址:"+name+"</div>"; winHtml+='<form action="around.php" method="post">經度：'+lng+'</br> 緯度：'+lat+'</br><input type="button" onClick=returnResult('+lng+','+lat+',"'+name+'") value="選取該點"/></form>'; // 註冊標註點的點選事件 markerPoint.addEventListener("click", function () { var info=new BMap.InfoWindow(winHtml); this.openInfoWindow(info); info.setTitle(name); }); var info =new BMap.InfoWindow(winHtml); markerPoint.openInfoWindow(info); info.setTitle(name); } function markPointShowWin(lng, lat, name){ var lnglat = new window.BMap.Point(lng, lat); // 建立標註物件 markerPoint = new BMap.Marker(lnglat); // 地圖上新增標註點 map.addOverlay(markerPoint); map.setCenter(lnglat); var winHtml = "經度：" + lng + "，緯度：" + lat; // 註冊標註點的點選事件 markerPoint.addEventListener("click", function () { var info=new BMap.InfoWindow(winHtml); this.openInfoWindow(info); info.setTitle(name); }); var info =new BMap.InfoWindow(winHtml); markerPoint.openInfoWindow(info); info.setTitle(name); } // 取消標註的座標點 function removeMarkPoint() { map.removeOverlay(markPoint); } // 清除地圖上的所有座標點 function cleanAllMark() { clearAll(); //map.clearOverLays(); } /** * @Description：手動選取座標 * @author:pzx * @date:2015/05/27 */ function addMapClick() { // 移除地圖的點選事件 removeMapClick(); // 移除地圖上所有標記點和查詢結果 clearAll(); var key='BCTHLO5T1L0xGkPyv3sGHDOFqww6H3LB'; preMarker = ''; //地圖繫結點選使事件 map.addEventListener("click", mapclick=function(e){ //點選事件 //alert(e.point.lng + ", " + e.point.lat); if(!e.overlay){ var targetUrl='http://api.map.baidu.com/geocoder/v2/?ak='+key+'&location='+e.point.lat+','+e.point.lng+'&output=json&pois=0'; $.ajax({ url:targetUrl, type:"get", async : false, dataType:'jsonp', beforeSend:function(){ }, success:function(data,status){ if(status=='success' && data.status==0){ 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 - 10 * 25) // 設定圖片偏移 }); var marker=new BMap.Marker(e.point,{icon:myIcon}); map.removeOverlay(preMarker); map.addOverlay(marker); content="<div>地址:"+data.result.formatted_address+"</div>"; content+='<form action="around.php" method="post">經度：'+data.result.location.lng+'</br> 緯度：'+data.result.location.lat+'</br><input type="button" onClick=returnResult("'+data.result.location.lng+'","'+data.result.location.lat+'","'+data.result.formatted_address+'") value="選取當前位置"></form>'; var info=new BMap.InfoWindow(content); marker.openInfoWindow(info); info.setTitle("經緯度資訊"); preMarker=marker; } }, error:function(XMLHttpRequest, textStatus, errorThrown){ alert(XMLHttpRequest.status); alert(XMLHttpRequest.readyState); alert(textStatus); alert(errorThrown); } }); } }); } //移除地圖的點選事件 function removeMapClick() { // 移除地圖的點選事件 map.removeEventListener('click',mapclick); } // 清空地圖及搜尋列表 function clearAll() { map.clearOverlays(); document.getElementById("searchDiv").innerHTML = ""; document.getElementById("resultDiv").style.display = "none"; document.getElementById("statisticsDiv").innerHTML = ""; document.getElementById("statisticsDiv").style.display = "none"; document.getElementById("promptDiv").innerHTML = ""; document.getElementById("promptDiv").style.display = "none"; document.getElementById("suggestsDiv").innerHTML = ""; document.getElementById("suggestsDiv").style.display = "none"; document.getElementById("lineDataDiv").innerHTML = ""; document.getElementById("lineDataDiv").style.display = "none"; }
主要的jsp頁面，左側為查詢頁面：右側為地圖：
效果如圖：<%@ page language="java" contentType="text/html; charset=GBK" pageEncoding="GBK"%> <% String pageState = request.getParameter("pageState"); %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <%@ include file="/common/taglibs.jsp"%> <html> <head> <meta http-equiv="content-type" content="text/html; charset=GBK" /> <title>地址查詢</title> <style type="text/css"> .search { font-size: 13px; border: 1px solid #999999; } .ls { line-height: 27px; padding-left: 7px; } .prompt { display: none; font-size: 13px; border: 1px solid #999999; } .statistics { display: none; font-size: 13px; border: 1px solid #999999; overflow-y: scroll; height: 150px; } .suggests { display: none; font-size: 13px; border: 1px solid #999999; } ; .lineData { display: none; font-size: 13px; border: 1px solid #999999; } .result { display: none; font-size: 12px; border: 1px solid #999999; line-height: 27px; padding-left: 7px; } .BMap_cpyCtrl { display:none; } .anchorBL{ display:none; } </style> <%-- <script type="text/javascript" src="http://api.tianditu.com/api-new/api/js/maps.js"></script> <script type="text/javascript" src="${ctx}/gis/tianditu/tiandituMap.js"></script> --%> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=BCTHLO5T1L0xGkPyv3sGHDOFqww6H3LB"></script> <script type="text/javascript" src="${ctx}/gis/baiduMap/baiduMap.js"></script> <script type="text/javascript"> var x, y, zoneName, returndata; function returnResultByLntLat(lng, lat) { lng = parseFloat(lng).toFixed(5); lat = parseFloat(lat).toFixed(5); returndata = { longitude : lng, latitude : lat, address : null, name : null }; onOk(); } function returnResult(lng, lat, name) { lng = parseFloat(lng).toFixed(5); lat = parseFloat(lat).toFixed(5); returndata = { longitude : lng, latitude : lat, address : name, name : name }; onOk(); } //回撥函式 function GetData() { return returndata; } function onOk() { CloseWindow("success"); } function SetData(data) { //跨頁面傳遞的資料物件，克隆後才可以安全使用 var jsonData = mini.clone(data); var name = jsonData.address ? jsonData.address : jsonData.name; var lon = jsonData.longitude; var lan = jsonData.latitude; if (lon && lan) {//如果存在經緯度，則直接渲染，不再做查詢 markPointShowWin(lon, lan, name); } else {//查詢 if ("<%=pageState%>" != "view") { mini.get('keyWord').setValue(name); searchAddr(); } } } function gotoPage(flag){ var index = 0; var pageIndex = localSearch.getResults().getPageIndex(); var numpages = localSearch.getResults().getNumPages(); if(flag =="frist"){ localSearch.gotoPage(index); }else if (flag == "ahead"){ if(pageIndex > 0){ localSearch.gotoPage(pageIndex-1); } }else if (flag == "next"){ if(pageIndex<numpages){ localSearch.gotoPage(pageIndex + 1); } }else if (flag == "last"){ localSearch.gotoPage((parseInt(numpages)-1)); }else if (flag == "jump"){ index = document.getElementById("pageId").value; if(index>=0){ localSearch.gotoPage((parseInt(index)-1)); } } } </script> </head> <body onLoad="onLoad()"> <%if("view".equals(pageState)){ %> <div id="mapDiv" style="width: 100%; height: 100%"></div> <%}else{ %> <div class="mini-splitter" id="splitter1" style="width: 100%; height: 100%;"> <div size="300" showCollapseButton="true" style="padding: 5px;"> <div> <!-- 搜尋面板 --> <div> <table width="100%" cellpadding="2"> <colgroup> <col style="width: 80px;" /> <col /> </colgroup> <%-- <tr> <td align="right">搜尋城市：</td> <td><bspHtml:ZoneCode property="city" style="width:100%;"></bspHtml:ZoneCode> </td> </tr> --%> <tr> <td align="right">搜尋內容：</td> <td><bspHtml:TextBox property="keyWord" style="width:100%;" onenter="searchAddr();"></bspHtml:TextBox></td> </tr> <tr> <td colspan="2" align="right"><a class="mini-button" iconCls="icon-search" onclick="searchAddr()">開始搜尋</a> <a class="mini-button" iconCls="icon-add" onclick="addMapClick()">新增手動標繪</a> </td> </tr> <tr> <td colspan="2" align="right"><a class="mini-button" iconCls="icon-cancel" onclick="cleanAllMark()">清除搜尋</a> <a class="mini-button" iconCls="icon-remove" onclick="removeMapClick()">取消手動標繪</a></td> </tr> </table> </div> <div> 地址列表：(<font color="blue">單擊定位，雙擊選擇</font>) </div> <!-- 提示詞面板 --> <div id="promptDiv" class="prompt"></div> <!-- 統計面板 --> <div id="statisticsDiv" class="statistics"></div> <!-- 建議詞面板 --> <div id="suggestsDiv" class="suggests"></div> <!-- 公交提示面板 --> <div id="lineDataDiv" class="lineData"></div> <!-- 搜尋結果面板 --> <div id="resultDiv" class="result"> <div id="searchDiv"></div> <div id="pageDiv"> <input type="button" value="第一頁" onClick="gotoPage('frist');" /> <input type="button" value="上一頁" onClick="gotoPage('ahead');" /> <input type="button" value="下一頁" onClick="gotoPage('next');" /> <input type="button" value="最後一頁" onClick="gotoPage('last');" /> <br /> 轉到第<input type="text" value="1" id="pageId" size="3" />頁 <input type="button" onClick="gotoPage('jump');" value="轉到" /> </div> </div> </div> </div> <div showCollapseButton="false"> <div id="mapDiv" style="width: 100%; height: 100%"></div> </div> </div> <%} %> </body> </html>
