html5定位取得目前位置並在百度地圖上顯示_html5教學技巧

在開發行動端 web 或webapp時，使用百度地圖 API 的過程中，經常需要透過手機定位來取得目前位置並在地圖上居中顯示出來，這就需要用到html5的地理定位功能。

複製程式碼

程式碼如下:

navigator.gegeyge;

在取得座標成功之後會執行回呼函數callback; callback 方法的參數就是取得到的座標點；然後可以初始化地圖，設定控制項、中心點、縮放等級，然後在地圖中加入point的overlay：

複製程式碼

程式碼如下:

var🎜>程式碼如下:


var map = new BMap. Map("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 。 >BMap.Convertor.translate(gpsPoint, 0, callback);

//gpsPoint：轉換前座標，第二個參數為轉換方法，0表示gps座標轉換成百度座標，callback回調函數，參數為新座標點範例的詳細程式碼如下：（引用中的ak是申請的key）

複製程式碼

複製程式碼

代碼如下:

<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 currentLon = position.coords. <br />var gpsPoint = new BMap.Point(currentLon, currentLat); <br />BMap.Convertor.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>

本人開發過程中覺得電腦的定位速度有點慢，常常無法取得座標導致地圖無法顯示，建議用手機測試，定位較快。

當然了，如果僅是開發行動端的網頁，就不需要使用jQuery，框架太大，可以換用其他輕量級的行動端的 js 框架。