调用百度地图api实现地图查询功能
生活随笔
收集整理的這篇文章主要介紹了
调用百度地图api实现地图查询功能
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
百度地圖api功能強大，進入百度地圖api平臺之后首先需要注冊申請一個ak碼（其實就是權限碼），通過審核之后就可以參考api提供的例子進行自定義的地圖開發功能了。
在這里提供兩個本人寫好的地圖查詢功能，分別是【根據輸入地址智能定位地圖坐標】以及【自動補全起點/終點名稱并自動生成公交線路】，代碼不難，重在分享，后續有時間可能會繼續增加地圖插件并更新博客。
1·【根據輸入地址智能定位地圖坐標】
<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><style type="text/css">body, html{width: 100%;height: 100%;margin:0;font-family:"微軟雅黑";font-size:14px;}#l-map{height:300px;width:100%;}#r-result{width:100%;}</style><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=這里需要輸入你申請的ak碼"></script><title></title> </head> <body><div id="l-map"></div><div id="r-result">請輸入:<input type="text" id="suggestId" size="20" value="百度" style="width:150px;" /></div><div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div> </body> </html> <script type="text/javascript">// 百度地圖API功能function G(id) {return document.getElementById(id);}var map = new BMap.Map("l-map");map.centerAndZoom("北京",12); // 初始化地圖,設置城市和地圖級別。var ac = new BMap.Autocomplete( //建立一個自動完成的對象{"input" : "suggestId","location" : map});ac.addEventListener("onhighlight", function(e) { //鼠標放在下拉列表上的事件var str = "";var _value = e.fromitem.value;var value = "";if (e.fromitem.index > -1) {value = _value.province + _value.city + _value.district + _value.street + _value.business;} str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;value = "";if (e.toitem.index > -1) {_value = e.toitem.value;value = _value.province + _value.city + _value.district + _value.street + _value.business;} str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;G("searchResultPanel").innerHTML = str;});var myValue;ac.addEventListener("onconfirm", function(e) { //鼠標點擊下拉列表后的事件var _value = e.item.value;myValue = _value.province + _value.city + _value.district + _value.street + _value.business;G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;setPlace();});function setPlace(){map.clearOverlays(); //清除地圖上所有覆蓋物function myFun(){var pp = local.getResults().getPoi(0).point; //獲取第一個智能搜索的結果map.centerAndZoom(pp, 18);map.addOverlay(new BMap.Marker(pp)); //添加標注}var local = new BMap.LocalSearch(map, { //智能搜索onSearchComplete: myFun});local.search(myValue);} </script>2·【自動補全起點/終點名稱并自動生成公交線路】
<html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><style type="text/css">body, html {width: 100%;height: 100%; margin:0;font-family:"微軟雅黑";}#l-map{height:500px;width:100%;}</style><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=這里需要輸入你申請的ak碼"></script><title>根據起終點名稱查詢公交換乘</title> </head> <body><div id="l-map"></div><div id="r-result">起點:<input type="text" id="suggestId1" size="20" value="" style="width:150px;" /></div><div id="searchResultPanel1" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div><div id="r-result">終點:<input type="text" id="suggestId2" size="20" value="" style="width:150px;" /></div><div id="searchResultPanel2" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div><div id="driving_way"><select><option value="0">最少時間</option><option value="1">最少換乘</option><option value="2">最少步行</option><option value="3">不乘地鐵</option></select><input type="button" id="result" value="查詢"/></div><input type="hidden" id="qidian"><input type="hidden" id="zhongdian"> </body> </html> <script type="text/javascript">// 百度地圖API功能var map = new BMap.Map("l-map"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 12); // 初始化地圖，設置中心點坐標和地圖級別 map.enableScrollWheelZoom(true); //開啟鼠標滾輪縮放map.addControl(new BMap.NavigationControl());map.addControl(new BMap.ScaleControl());map.addControl(new BMap.OverviewMapControl());map.addControl(new BMap.MapTypeControl());var routePolicy = [BMAP_TRANSIT_POLICY_LEAST_TIME,BMAP_TRANSIT_POLICY_LEAST_TRANSFER,BMAP_TRANSIT_POLICY_LEAST_WALKING,BMAP_TRANSIT_POLICY_AVOID_SUBWAYS];var transit = new BMap.TransitRoute(map, {renderOptions: {map: map},policy: 0});//查詢路線 $("#result").click(function(){if(G("qidian").value!=null&&G("zhongdian").value!=null){map.clearOverlays(); var i=$("#driving_way select").val();var start = G("qidian").value;var end = G("zhongdian").value;search(start,end,routePolicy[i]); function search(start,end,route){ transit.setPolicy(route);transit.search(start,end);}}else{alert("請填寫起點和終點");return;} });function G(id) {return document.getElementById(id);}//起點終點智能被選地址下拉框var ac1 = new BMap.Autocomplete( //建立一個自動完成的對象{"input" : "suggestId1","location" : map});ac1.addEventListener("onhighlight", function(e) { //鼠標放在下拉列表上的事件var str = "";var _value = e.fromitem.value;var value = "";if (e.fromitem.index > -1) {value = _value.province + _value.city + _value.district + _value.street + _value.business;} str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;value = "";if (e.toitem.index > -1) {_value = e.toitem.value;value = _value.province + _value.city + _value.district + _value.street + _value.business;} str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;G("searchResultPanel1").innerHTML = str;});var myValue;ac1.addEventListener("onconfirm", function(e) { //鼠標點擊下拉列表后的事件var _value = e.item.value;myValue = _value.province + _value.city + _value.district + _value.street + _value.business;G("searchResultPanel1").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;setPlace1();});var ac2 = new BMap.Autocomplete( //建立一個自動完成的對象{"input" : "suggestId2","location" : map});ac2.addEventListener("onhighlight", function(e) { //鼠標放在下拉列表上的事件var str = "";var _value = e.fromitem.value;var value = "";if (e.fromitem.index > -1) {value = _value.province + _value.city + _value.district + _value.street + _value.business;} str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;value = "";if (e.toitem.index > -1) {_value = e.toitem.value;value = _value.province + _value.city + _value.district + _value.street + _value.business;} str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;G("searchResultPanel2").innerHTML = str;});var myValue;ac2.addEventListener("onconfirm", function(e) { //鼠標點擊下拉列表后的事件var _value = e.item.value;myValue = _value.province + _value.city + _value.district + _value.street + _value.business;G("searchResultPanel2").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;setPlace2();});function setPlace1(){map.clearOverlays(); //清除地圖上所有覆蓋物function myFun(){var pp = local.getResults().getPoi(0).point; //獲取第一個智能搜索的結果map.centerAndZoom(pp, 18);map.addOverlay(new BMap.Marker(pp)); //添加標注}var local = new BMap.LocalSearch(map, { //智能搜索onSearchComplete: myFun});local.search(myValue);G("qidian").value =myValue; }function setPlace2(){map.clearOverlays(); //清除地圖上所有覆蓋物function myFun(){var pp = local.getResults().getPoi(0).point; //獲取第一個智能搜索的結果map.centerAndZoom(pp, 18);map.addOverlay(new BMap.Marker(pp)); //添加標注}var local = new BMap.LocalSearch(map, { //智能搜索onSearchComplete: myFun});local.search(myValue);G("zhongdian").value =myValue; } </script>如果有幫助，點個贊再走唄！感謝支持。
總結
以上是生活随笔為你收集整理的调用百度地图api实现地图查询功能的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 用什么软件测试mate9的闪存_华为ma
- 下一篇： 四色定理java_四色定理中公理的证明