html5定位並在百度地圖上顯示的範例_html5教學技巧

在開發行動端 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>