使用html5獲取當前手機的經緯度，並接入百度地圖API，查詢出當前位置
阿新 • • 發佈：2017-12-28
api detail attribute spa rip coord component per bar
最近項目需要，稍微研究一下html5獲取當前地理位置的問題。
獲取當前位置的經緯度很簡單，一句代碼就搞定
[javascript] view plain copy print?
- navigator.geolocation.getCurrentPosition(function (position) {
- longitude = position.coords.longitude;
- latitude = position.coords.latitude;
- });
然後查閱百度地圖API，很easy，也是幾句代碼就搞定的事
[javascript] view plain copy print?
- var map = new BMap.Map("allmap");<pre name="code" class="javascript"> var point = new BMap.Point(longitude,latitude);<pre name="code" class="javascript"> var geoc = new BMap.Geocoder();
[javascript] view plain copy print?
- geoc.getLocation(point, function(rs){
- var addComp = rs.addressComponents;
- alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
- });
好的，本以為到此結束，結果實際測試發現有點問題，顯示的位置與我的真正位置偏差大約兩三公裏左右。
一開始以為是html5獲取經緯度的偏差問題，然而並不是
然後開始查資料，無意中發現了一個叫做 坐標轉換 的東西，一搜索才知道，原來百度地圖對坐標進行了深度封裝，必須通過他提供的接口進行坐標轉換才行，廢話不多說，上最終代碼吧
[javascript] view plain copy print?
- var map = new BMap.Map("allmap");
- var longitude, latitude;
- navigator.geolocation.getCurrentPosition(function (position) {
- longitude = position.coords.longitude;
- latitude = position.coords.latitude;
- });
- setTimeout(function () {
- var gpsPoint = new BMap.Point(longitude, latitude);
- BMap.Convertor.translate(gpsPoint, 0, function (point) {
- var geoc = new BMap.Geocoder();
- geoc.getLocation(point, function (rs) {
- var addComp = rs.addressComponents;
- alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
- });
- });
- }, 3000);
這段代碼依賴兩個包
[html] view plain copy print?
- <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=秘鑰"></script>
- <script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
使用html5獲取當前手機的經緯度，並接入百度地圖API，查詢出當前位置