東莞易思訓(xùn)教育

7x24小時(shí)咨詢熱線

400-660-3310

當(dāng)前位置 : 好學(xué)校 東莞易思訓(xùn)教育 學(xué)習(xí)資訊 資訊詳情

web前端如何使用HTML5獲取地理位置定位信息?

2021-12-21

定位功能(Geolocation)是HTML5的新特性,因此只有在支持HTML5的現(xiàn)代瀏覽器上運(yùn)行,特別是手持設(shè)備如iphone,地理定位更加精確。首先我們要檢測用戶設(shè)備瀏覽器是否支持地理定位,如果支持則獲取地理信息。注意這個(gè)特性可能侵犯用戶的隱私,除非用戶同意,否則用戶位置信息是不可用的,所以我們?cè)谠L問該應(yīng)用時(shí)會(huì)提示是否允許地理定位,我們當(dāng)然選擇允許即可。

function getLocation(){

if (navigator.geolocation){

navigator.geolocation.getCurrentPosition(showPosition,showError);

}else{

alert(\\\"瀏覽器不支持地理定位。\\\");

}

}

web前端

上面的代碼可以知道,如果用戶設(shè)備支持地理定位,則運(yùn)行 getCurrentPosition() 方法。如果getCurrentPosition()運(yùn)行成功,則向參數(shù)showPosition中規(guī)定的函數(shù)返回一個(gè)coordinates對(duì)象,getCurrentPosition() 方法的第二個(gè)參數(shù)showError用于處理錯(cuò)誤,它規(guī)定當(dāng)獲取用戶位置失敗時(shí)運(yùn)行的函數(shù)。

我們先來看函數(shù)showError(),它規(guī)定獲取用戶地理位置失敗時(shí)的一些錯(cuò)誤代碼處理方式:

function showError(error){

switch(error.code) {

case error.PERMISSION_DENIED:

alert(\\\"定位失敗,用戶拒絕請(qǐng)求地理定位\\\");

break;

case error.POSITION_UNAVAILABLE:

alert(\\\"定位失敗,位置信息是不可用\\\");

break;

case error.TIMEOUT:

alert(\\\"定位失敗,請(qǐng)求獲取用戶位置超時(shí)\\\");

break;

case error.UNKNOWN_ERROR:

alert(\\\"定位失敗,定位系統(tǒng)失效\\\");

break;

}

}

web前端操作

我們?cè)賮砜春瘮?shù)showPosition(),調(diào)用coords的latitude和longitude即可獲取到用戶的緯度和經(jīng)度。

function showPosition(position){

var lat = position.coords.latitude; //緯度

var lag = position.coords.longitude; //經(jīng)度

alert(\\\'緯度:\\\'+lat+\\\',經(jīng)度:\\\'+lag);

}

收藏
分享到:

相關(guān)課程

相關(guān)資訊

東莞易思訓(xùn)教育

東莞易思訓(xùn)教育

認(rèn)證等級(jí)

信譽(yù)良好,可安心報(bào)讀

東莞易思訓(xùn)教育

已獲好學(xué)校V2信譽(yù)等級(jí)認(rèn)證

信譽(yù)值

  • (60-80)基礎(chǔ)信譽(yù)積累,可放心報(bào)讀
  • (81-90)良好信譽(yù)積累,可持續(xù)信賴
  • (91-100)充分信譽(yù)積累,推薦報(bào)讀

與好學(xué)校簽訂讀書保障協(xié)議:

  • 100%
  • 37
  • 1903
在線咨詢
;