html5定位並在百度地圖上顯示的範例_html5教學技巧
May 16, 2016 pm 03:48 PM
百度地圖
在開發行動端 web 或webapp時,使用百度地圖 API 的過程中,經常需要透過手機定位來取得目前位置並在地圖上居中顯示出來,這就需要用到html5的地理定位功能。
複製程式碼
程式碼如下:navigator.gegeyge;
在取得座標成功之後會執行回呼函數 callback; callback 方法的參數就是取得到的座標點;然後可以初始化地圖,設定控制項、中心點、縮放等級,然後在地圖中加入point的overlay:
複製程式碼
程式碼如下:var map = new BMap." mapDiv");//mapDiv為放置地圖的div 的id
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl (new BMap.OverviewMapControl());
map.centerAndZoom(point, 15);//point為坐標點,15為地圖縮放級別,最大級別是18
var pointMarker = new BMap.Marker(point );
map.addOverlay(pointMarker);
然而事實上這樣還不夠,顯示出來的結果並不准,這是因為getCurrentPosition 獲取到的坐標是GPS 經緯度坐標,而百度地圖的坐標是經過特殊轉換的,所以,在獲取定位坐標和初始化地圖之間需要進行一步座標轉換工作,該轉換方法百度API裡面已經提供了,轉換一個點或者批量裝換的方法均有提供:單點轉換需引用http://developer.baidu.com/map/ jsdemo/demo/convertor.js,批次轉換需引用http://developer.baidu.com/map/jsdemo/demo/changeMore.js,這裡只需要前者:
複製程式碼
程式碼如下:BMap.Convertor.translate(gvertorPoint.translate00 , callback);
//gpsPoint:轉換前座標,第二個參數為轉換方法,0表示gps座標轉換成百度座標,callback回呼函數,參數為新座標點
範例的詳細程式碼如下:(引用中的ak是申請的key)
複製代碼
代碼如下:br />
<script><br /> $(function(){<br /> navigator.geolocation.getCurrentPosition(translatePoint); //定位<br /> });<br /> function translatePoint( position){<br /> var currentLat = position.coords.latitude;<br /> var currentLon = position.coords.longitude;<br /> var gpsPoint = new BMap.Point(currentLon, currentLat);<ver. translate(gpsPoint, 0, initMap); //轉換座標<br /> }<br /> function initMap(point){<br /> //初始化地圖<br /> map = new BMap.Map("map");<br /> map.addControl(new BMap.NavigationControl());<br /> map.addControl(new BMap.ScaleControl());<br /> map.addControl(new BMap.OverviewMapControl());<br /> map.centerAndZoom( point, 15);<br /> map.addOverlay(new BMap.Marker(point))<br /> }<br /> </script>
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章
兩個點博物館:邦格荒地地點指南
4 週前
By 尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間?
3 週前
By DDD
倉庫:如何復興隊友
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗?
3 週前
By 王林

熱門文章
兩個點博物館:邦格荒地地點指南
4 週前
By 尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間?
3 週前
By DDD
倉庫:如何復興隊友
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗?
3 週前
By 王林

熱門文章標籤

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)