H5 获取手机GPS坐标
生活随笔
收集整理的這篇文章主要介紹了
H5 获取手机GPS坐标
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
只要手機有GPS模塊,可以用HTML5的Geolocation接口獲取
在HTML5中,geolocation作為navigator的一個屬性出現,它本身是一個對象,擁有三個方法:
-
getCurrentPosition
-
watchPosition
-
clearWatch
1.簡單
function getLocation(){if(navigator.geolocation){//判斷是否有這個對象navigator.geolocation.getCurrentPosition(function(pos){console.log("經度:"+pos.coords.longitude+"緯度:"+pos.coords.latitude)})}else{console.log("當前系統不支持GPS API")}}2.比較全面的,其實沒必要
function getLocation(){var options={enableHighAccuracy:true, maximumAge:1000}if(navigator.geolocation){//瀏覽器支持geolocation// alert("瀏覽器支持geolocation");navigator.geolocation.getCurrentPosition(onSuccess,onError,options);}else{//瀏覽器不支持geolocationalert("瀏覽器不支持geolocation");}}獲取成功時
function onSuccess(pos){console.log("經度:"+pos.coords.longitude+"緯度:"+pos.coords.latitude)}獲取失敗時,這個錯誤故意寫得詳細點,讓你明白為什么失敗
function onError(error){switch(error.code){case 1:alert("位置服務被拒絕");break;case 2:alert("暫時獲取不到位置信息");break;case 3:alert("獲取信息超時");break;case 4:alert("未知錯誤");break;}}other
//判斷瀏覽器是否支持geolocation if(navigator.geolocation){// getCurrentPosition支持三個參數// getSuccess是執行成功的回調函數// getError是失敗的回調函數// getOptions是一個對象,用于設置getCurrentPosition的參數// 后兩個不是必要參數var getOptions = {//是否使用高精度設備,如GPS。默認是trueenableHighAccuracy:true,//超時時間,單位毫秒,默認為0timeout:5000,//使用設置時間內的緩存數據,單位毫秒//默認為0,即始終請求新數據//如設為Infinity,則始終使用緩存數據maximumAge:0};navigator.geolocation.getCurrentPosition(getSuccess, getError, getOptions);//成功回調function getSuccess(position){// getCurrentPosition執行成功后,會把getSuccess傳一個position對象// position有兩個屬性,coords和timeStamp// timeStamp表示地理數據創建的時間??????// coords是一個對象,包含了地理位置數據console.log(position.timeStamp); // 估算的緯度console.log(position.coords.latitude); // 估算的經度console.log(position.coords.longitude); // 估算的高度 (以米為單位的海拔值)console.log(position.coords.altitude); // 所得經度和緯度的估算精度,以米為單位console.log(position.coords.accuracy); // 所得高度的估算精度,以米為單位console.log(position.coords.altitudeAccuracy); // 宿主設備的當前移動方向,以度為單位,相對于正北方向順時針方向計算console.log(position.coords.heading);// 設備的當前對地速度,以米/秒為單位 console.log(position.coords.speed); // 除上述結果外,Firefox還提供了另外一個屬性addressif(position.address){//通過address,可以獲得國家、省份、城市console.log(position.address.country);console.log(position.address.province);console.log(position.address.city);}}//失敗回調function getError(error){// 執行失敗的回調函數,會接受一個error對象作為參數// error擁有一個code屬性和三個常量屬性TIMEOUT、PERMISSION_DENIED、POSITION_UNAVAILABLE// 執行失敗時,code屬性會指向三個常量中的一個,從而指明錯誤原因switch(error.code){case error.TIMEOUT:console.log('超時');break;case error.PERMISSION_DENIED:console.log('用戶拒絕提供地理位置');break;case error.POSITION_UNAVAILABLE:console.log('地理位置不可用');break;default:break;}}// watchPosition方法一樣可以設置三個參數// 使用方法和getCurrentPosition方法一致,只是執行效果不同。// getCurrentPosition只執行一次// watchPosition只要設備位置發生變化,就會執行var watcher_id = navigator.geolocation.watchPosition(getSuccess, getError, getOptions);//clearwatch用于終止watchPosition方法clearWatch(watcher_id); } 創作挑戰賽新人創作獎勵來咯,堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的H5 获取手机GPS坐标的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 新飞空调哪款好用?新飞十大热门空调排行榜
- 下一篇: 百度地图API : 修改marker图标