HTML5 地理位置定位(Geolocation)原理及應用

時間 2019-11-12

標籤 html5 html 地理位置定位 geolocation 原理應用欄目 HTML5 简体版

原文原文鏈接

HTML5 地理位置定位(Geolocation)原理及應用javascript

代碼實現：html

1.核心對象java

①Geolocation是window.navigator下面的一個對象，該對象提供了實現地理位置定位的接口。git

②要用該功能首先判斷瀏覽器是否支持navigator.geolocation該對象。api

if(navigator.geolocation){
　　navigator.geolocation.getCurrentPosition(success,error,options)
}else{
　　alert("您的瀏覽器out了");
}瀏覽器

2.Geolocation對象詳解緩存

①getCurrentPosition(success,error,options)該方法是實現地理定位的核心方法，該方法可以對獲取到的信息做出處理以及設置。網絡

A.success(position) 獲取信息成功的回調函數
B.error(errorcode)獲取信息失敗的回調函數
C.options獲取信息前能夠按照你的需求來設置一些參數函數

success(position) 獲取信息成功的回調函數ui

①當成功得到信息的時候，會自動調用success函數，而這個函數會自動生成一個包含返回地理信息的position對象，以下：

A.coords.latitude（緯度）
B.coords.longitude（經度）
C.coords.altitude（海拔）
D.coords.accuracy（位置精確度）
E.coords.altitudeAccuracy(海拔精確度)
F.coords.heading（朝向）
G.coords.speed (速度)
H.timestamp(響應的日期/時間)

error(errorcode)獲取信息失敗的回調函數

A. 地理信息會由於各類因素，例如信號很差等等而出錯。所以當獲取信息失敗的時候會自動調用getCurrentPosition的第二個參數，即error函數，這個函數會自動生成一個包含錯誤代碼和錯誤信息的對象做爲其參數，code是錯誤代碼，message是錯誤信息。

switch(errorcode.code){
case 1 :
alert(errorcode.message);//用戶選了不容許
break;
case 2:
alert(errorcode.message);/連不上GPS衛星，或者網絡斷了
break;
case 3:
alert(errorcode.message);//超時了
break;
default:
alert(errorcode.message);//未知錯誤，實際上是err.code==0的時候
break;
}

options 設置一些參數

①options是一個對象，能夠設置超時時間、緩存時間等，以下：

A.enableHighAccuracy 表示是否容許使用高精度，但這個參數在不少設備上設置了都沒用，設備綜合考慮電量、地理狀況等，不少時候都是默認的由設備自身來調整。

B.timeout 指定超時時間

C.maximumAge 是指緩存的時間

此外 geolocation 還有兩個方法：

1.watchPosition(success,error,options) 表示重複獲取地理位置，至關於將getCurrentPosition這個方法利用setinterval不斷執行，其餘用法和參數使用同樣。2.clearWatch()用來清除前一次獲取的位置信息。這個兩個方法配合使用，可以實現一些很棒的功能，好比說：導航等！

<!DOCTYPE HTML><html> <head> <style> #map{ width:1000px;height:1000px; } </style> </head> <body> <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=6KQ6n1wazptsgrv2VWGDfvCbfkHuiCcO"></script> <script> function success (position) { var la=position.coords.latitude; var lo=position.coords.longitude; var map = new BMap.Map("map"); // 建立Map實例 map.centerAndZoom(new BMap.Point(lo,la), 15); // 初始化地圖,設置中心點座標和地圖級別 map.addControl(new BMap.NavigationControl()); // 添加平移縮放控件 map.addControl(new BMap.ScaleControl()); // 添加比例尺控件 map.addControl(new BMap.OverviewMapControl()); //添加縮略地圖控件 map.enableScrollWheelZoom(); //啓用滾輪放大縮小 map.addControl(new BMap.MapTypeControl()); //添加地圖類型控件 map.setCurrentCity("北京"); // 設置地圖顯示的城市此項是必須設置的 var local = new BMap.LocalSearch(map, { renderOptions: {map: map, panel: "r-result"} }); local.search("學校") } function error (errorCode) { alert(errorCode.code+"--"+errorCode.message); } var options={}; if(navigator.geolocation){ navigator.geolocation.getCurrentPosition(success,error,options) }else{ alert("您的瀏覽器out了"); } </script> <div id="map"> </div> </body></html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。