這次帶給大家用Geolocation獲取地理位置信息,用Geolocation獲取地理位置信息的注意事項有哪些,下面就是實戰案例,一起來看一下。
Html5中提供了地理位置資訊的API,透過瀏覽器取得使用者目前位置。基於此特性可以開發基於位置的服務應用。在取得地理位置資訊前,首先瀏覽器會向使用者詢問是否願意分享其位置信息,待使用者同意後才能使用。
Html5取得地理位置資訊是透過Geolocation API提供,使用其getCurrentPosition方法,此方法中有三個參數,分別是成功取得到地理位置資訊時所執行的回呼函數,失敗時所執行的回呼函數和可選屬性配置項。
如下Demo演示了透過Geolocation獲取地理位置信息,並在百度地圖上顯示當前位置(透過呼叫百度地圖API)。實驗結果發現位置被定位到了大學城內環東四路入口處,與本人所在位置(華工學生宿舍)偏差還是有點大的,達到200-300米左右。
程式碼如下所示(其中convertor.js為百度地圖提供的座標轉換檔):
<!DOCTYPE html> <html> <head> <title>H5地理位置Demo</title> <script src="http://api.map.baidu.com/api?v=1.3" type="text/javascript"> </script> <script type="text/javascript" src="convertor.js"> </script> </head> <body> <p id="map" style="width:600px; height:400px"> </p> </body> <script type="text/javascript"> if (window.navigator.geolocation) { var options = { enableHighAccuracy: true, }; window.navigator.geolocation.getCurrentPosition(handleSuccess, handleError, options); } else { alert("浏览器不支持html5来获取地理位置信息"); } function handleSuccess(position){ // 获取到当前位置经纬度 本例中是chrome浏览器取到的是google地图中的经纬度 var lng = position.coords.longitude; var lat = position.coords.latitude; // 调用百度地图api显示 var map = new BMap.Map("map"); var ggPoint = new BMap.Point(lng, lat); // 将google地图中的经纬度转化为百度地图的经纬度 BMap.Convertor.translate(ggPoint, 2, function(point){ var marker = new BMap.Marker(point); map.addOverlay(marker); map.centerAndZoom(point, 15); }); } function handleError(error){ } </script> </html>
convertor.js檔案:
(function() { // 闭包 function load_script(xyUrl, callback) { var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.type = 'text/javascript'; script.src = xyUrl; // 借鉴了jQuery的script跨域方法 script.onload = script.onreadystatechange = function() { if ((!this.readyState || this.readyState === "loaded" || this.readyState === "complete")) { callback && callback(); // Handle memory leak in IE script.onload = script.onreadystatechange = null; if (head && script.parentNode) { head.removeChild(script); } } }; // Use insertBefore instead of appendChild to circumvent an IE6 bug. head.insertBefore(script, head.firstChild); } function translate(point, type, callback) { var callbackName = 'cbk_' + Math.round(Math.random() * 10000); // 随机函数名 var xyUrl = "http://api.map.baidu.com/ag/coord/convert?from=" + type + "&to=4&x=" + point.lng + "&y=" + point.lat + "&callback=BMap.Convertor." + callbackName; // 动态创建script标签 load_script(xyUrl); BMap.Convertor[callbackName] = function(xyResult) { delete BMap.Convertor[callbackName]; // 调用完需要删除改函数 var point = new BMap.Point(xyResult.x, xyResult.y); callback && callback(point); } } window.BMap = window.BMap || {}; BMap.Convertor = {}; BMap.Convertor.translate = translate; })();
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
以上是用Geolocation取得地理位置信息的詳細內容。更多資訊請關注PHP中文網其他相關文章!