Html5中提供了地理位置信息的API，通過瀏覽器來獲取用戶當前位置。基於此特性可以開發基於位置的服務應用。在獲取地理位置信息前，首先瀏覽器都會向用戶詢問是否願意共享其位置信息，待用戶同意后才能使用。
Html5獲取地理位置信息是通過Geolocation API提供，使用其getCurrentPosition方法，此方法中有三個參數，分別是成功獲取到地理位置信息時所執行的回調函數，失敗時所執行的回調函數和可選屬性配置項。
如下Demo演示了通過Geolocation獲取地理位置信息，並在百度地圖上顯示當前位置（通過調用百度地圖API）。實驗結果發現位置被定位到了大學城內環東四路入口處，與本人所在位置（華工學生宿舍）偏差還是有點大的，達到200-300米左右。
代碼如下所示（其中convertor.js為百度地圖提供的坐標轉化文件）：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>H5地理位置Demo</title> 5 <script src="http://api.map.baidu.com/api?v=1.3" type="text/javascript"> 6 </script> 7 <script type="text/javascript" src="convertor.js"> 8 </script> 9 </head> 10 <body> 11 <div id="map" style="width:600px; height:400px"> 12 </div> 13 </body> 14 <script type="text/javascript"> 15 if (window.navigator.geolocation) { 16 var options = { 17 enableHighAccuracy: true, 18 }; 19 window.navigator.geolocation.getCurrentPosition(handleSuccess, handleError, options); 20 } else { 21 alert("瀏覽器不支持html5來獲取地理位置信息"); 22 } 23 24 function handleSuccess(position){ 25 // 獲取到當前位置經緯度 本例中是chrome瀏覽器取到的是google地圖中的經緯度 26 var lng = position.coords.longitude; 27 var lat = position.coords.latitude; 28 // 調用百度地圖api顯示 29 var map = new BMap.Map("map"); 30 var ggPoint = new BMap.Point(lng, lat); 31 // 將google地圖中的經緯度轉化為百度地圖的經緯度 32 BMap.Convertor.translate(ggPoint, 2, function(point){ 33 var marker = new BMap.Marker(point); 34 map.addOverlay(marker); 35 map.centerAndZoom(point, 15); 36 }); 37 } 38 39 function handleError(error){ 40 41 } 42 </script> 43 </html>
convertor.js文件：
1 (function() { // 閉包 2 function load_script(xyUrl, callback) { 3 var head = document.getElementsByTagName('head')[0]; 4 var script = document.createElement('script'); 5 script.type = 'text/javascript'; 6 script.src = xyUrl; 7 // 借鑒了jQuery的script跨域方法 8 script.onload = script.onreadystatechange = function() { 9 if ((!this.readyState || this.readyState === "loaded" || this.readyState === "complete")) { 10 callback && callback(); 11 // Handle memory leak in IE 12 script.onload = script.onreadystatechange = null; 13 if (head && script.parentNode) { 14 head.removeChild(script); 15 } 16 } 17 }; 18 // Use insertBefore instead of appendChild to circumvent an IE6 bug. 19 head.insertBefore(script, head.firstChild); 20 } 21 function translate(point, type, callback) { 22 var callbackName = 'cbk_' + Math.round(Math.random() * 10000); // 隨機函數名 23 var xyUrl = "http://api.map.baidu.com/ag/coord/convert?from=" + type 24 + "&to=4&x=" + point.lng + "&y=" + point.lat 25 + "&callback=BMap.Convertor." + callbackName; 26 // 動態創建script標簽 27 load_script(xyUrl); 28 BMap.Convertor[callbackName] = function(xyResult) { 29 delete BMap.Convertor[callbackName]; // 調用完需要刪除改函數 30 var point = new BMap.Point(xyResult.x, xyResult.y); 31 callback && callback(point); 32 } 33 } 34 35 window.BMap = window.BMap || {}; 36 BMap.Convertor = {}; 37 BMap.Convertor.translate = translate; 38 })();