使用百度地图api搜索两点位置、连线、计算距离、ip定位
生活随笔
收集整理的這篇文章主要介紹了
使用百度地图api搜索两点位置、连线、计算距离、ip定位
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
歡迎大家點一個關注，支持我的原創文章，謝謝！?
正文
現在在企業做web項目時，偶爾會用到地圖功能，而當前最流行的無疑是百度地圖了，百度地圖API為應用開發者提供了強大的功能，以下就介紹關于本人在做項目時關于百度地圖的一些實用的功能。
1、下面的代碼就是我的html文件，開發者要想使用百度地圖API，首先要在百度地圖開放平臺上申請密鑰，然后在html文件中引入百度地圖的api文件，這樣就能正常使用了
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <!-- 引入百度地圖api文件 --> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密鑰"></script> <!-- 引入jquery --> <script type="text/javascript" src="jquery-3.3.1.min.js"></script> <script type="text/javascript">$(function(){//給獲取位置按鈕注冊事件$("input[name='getPoint']").bind('click',function(){//獲取起始位置var beginPos=$("input[name='beginPos']").val();//獲取結束位置var endPos=$("input[name='endPos']").val();if(beginPos!='' && endPos!=''){loadMap(beginPos,endPos);}else{alert('起始位置或結束位置未填寫')}});//ip定位，精度為城市級別function myFun(result){var cityName = result.name;$("#msg").html("當前位置："+cityName);}var myCity = new BMap.LocalCity();myCity.get(myFun); });//加載地圖函數function loadMap(beginPos,endPos){//創建一個地圖實例var map = new BMap.Map("map");//添加平移縮放控件，PC端默認位于地圖左上方，它包含控制地圖的平移和縮放的功能map.addControl(new BMap.NavigationControl());//添加比例尺map.addControl(new BMap.ScaleControl()); //開啟鼠標滾輪縮放map.enableScrollWheelZoom();//創建本地搜索var localSearch = new BMap.LocalSearch(map);//允許自動調節窗體大小localSearch.enableAutoViewport();//設置搜索結束時的回調函數localSearch.setSearchCompleteCallback(function (searchResult) {var pois=new Array();for(var i=0;i<=1;i++){//獲取搜索結果var poi = searchResult[i].getPoi(0);//創建標注var marker = new BMap.Marker(poi.point);//存儲點pois.push(poi.point);//設置放大級別，范圍1-20map.centerAndZoom(poi.point,10);//添加覆蓋物map.addOverlay(marker); }//創建兩點間的折線var polyline = new BMap.Polyline([pois[0],pois[1]],{strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});//添加折線map.addOverlay(polyline);//計算兩點之間距離$("input[name='distance']").val((map.getDistance(pois[0],pois[1])).toFixed(2)+'米');});//搜索起始位置和結束位置localSearch.search([beginPos,endPos]);}</script> <style type="text/css">#map{width:100%;height:580px;} </style> </head> <body>起始位置：<input type="text" name="beginPos">結束位置：<input type="text" name="endPos"><input type="button" name="getPoint" value="獲取位置">距離為：<input type="text" name="distance" readonly="readonly"><span id="msg">正在獲取當前位置...</span><!--地圖容器--><div id="map"></div></body> </html>2、效果截圖
可以看到，通過ip定位功能，在界面上顯示我當前所在城市為煙臺市
在輸入框中輸入北京大學和清華大學這兩個位置，點擊獲取位置按鈕，地圖就出現在了界面。地圖上顯示了這兩個位置，并用直線連接，在上方還可以看到這兩個位置的地理距離是多少。
總結
以上是生活随笔為你收集整理的使用百度地图api搜索两点位置、连线、计算距离、ip定位的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： flex弹性盒子模型
- 下一篇： 移动 App 测试