JavaScript地理位置信息API
對(duì)于一個(gè)Web開(kāi)發(fā)程序員來(lái)說(shuō),開(kāi)發(fā)工作中一個(gè)最有意思的方面就是獲取地理位置信息;試想一下,瀏覽你的網(wǎng)頁(yè)的用戶是在什么地方?程序員可以根據(jù)用戶的地理位置信息來(lái)調(diào)整網(wǎng)站的語(yǔ)言、特定產(chǎn)品介紹等。下面我們將要演示的就是通過(guò)瀏覽器里JavaScript地理位置信息API來(lái)獲取詳細(xì)地理信息!
檢查你的瀏覽器是否支持地理位置信息API
目前主流的瀏覽器都已經(jīng)對(duì)JavaScript地理位置信息API有了較好的支持。但如果你還不放心,那么,確認(rèn)地理位置信息API支持情況最好的方式是瀏覽器的功能特征測(cè)試。
if("geolocation" in navigator) { //w00t! } else { alert("很不幸!你的瀏覽器并不支持Geolocation API功能"); }
對(duì)于判斷瀏覽器是否支持地理位置API,最主要的就是看看navigator.geolocation這個(gè)對(duì)象,使用in,而不是簡(jiǎn)單的使用if(navigator.geolocation),這一點(diǎn)非常重要,因?yàn)楹笳哂锌赡軙?huì)因此初始化地理位置信息對(duì)象,從而占用/鎖定了設(shè)備資源。
查詢地理位置信息
這個(gè)navigator.geolocation.getCurrentPosition方法是獲取詳細(xì)位置信息最關(guān)鍵的一個(gè)接口:
if("geolocation" in navigator) { navigator.geolocation.getCurrentPosition(function(position) { console.log(position); }); }
一旦你調(diào)用了這個(gè)方法(如果請(qǐng)求成功,它會(huì)執(zhí)行你在參數(shù)里提供的回調(diào)方法),瀏覽器會(huì)詢問(wèn)用戶是否允許程序獲取他們的地理位置信息。
當(dāng)用戶運(yùn)行網(wǎng)頁(yè)獲取他們的位置信息后,瀏覽器就可以開(kāi)始讀取地理信息,它會(huì)返回給你一個(gè)位置信息對(duì)象,對(duì)象的結(jié)構(gòu)基本是這樣的:
// "Position" object { coords: { "Coordinates" object accuracy: 65, altitude: 294.4074401855469, altitudeAccuracy: 10, heading: -1, latitude: 43.01256284360166, longitude: -89.44531987692744, speed: -1 }, timestamp: 1429722992094269 }
如果你覺(jué)得這些地理位置信息(地理經(jīng)緯度坐標(biāo))還不夠充足,還想要這些地理坐標(biāo)屬于哪個(gè)國(guó)家、城市,則你需要再調(diào)用其它的第三方數(shù)據(jù)庫(kù)——這里我們就不細(xì)述了。
這個(gè)地理位置信息API在很多移動(dòng)應(yīng)用里是最常見(jiàn)的API運(yùn)用,作為Web程序員,它應(yīng)該是你必須具備的一項(xiàng)知識(shí)技巧。幸運(yùn)的是,目前所有流行的瀏覽器都支持了這種技術(shù)。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。
- 使用JS獲取當(dāng)前地理位置方法匯總
- 百度地圖api應(yīng)用標(biāo)注地理位置信息(js版)
- 利用google提供的API(JavaScript接口)獲取網(wǎng)站訪問(wèn)者IP地理位置的代碼詳解
- 微信js-sdk地理位置接口用法示例
- js+html5獲取用戶地理位置信息并在Google地圖上顯示的方法
- Node.js和PHP根據(jù)ip獲取地理位置的方法
- js實(shí)現(xiàn)百度地圖定位于地址逆解析,顯示自己當(dāng)前的地理位置
- js實(shí)現(xiàn)PC端根據(jù)IP定位當(dāng)前城市地理位置
- Angularjs自定義指令實(shí)現(xiàn)三級(jí)聯(lián)動(dòng) 選擇地理位置
- JS獲取當(dāng)前地理位置的方法
相關(guān)文章
基于javascript處理nginx請(qǐng)求過(guò)程詳解
這篇文章主要介紹了基于javascript處理nginx請(qǐng)求過(guò)程詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07JavaScript實(shí)現(xiàn)簡(jiǎn)單的星星評(píng)分效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單的星星評(píng)分效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05layui+SSM的數(shù)據(jù)表的增刪改實(shí)例(利用彈框添加、修改)
今天小編就為大家分享一篇layui+SSM的數(shù)據(jù)表的增刪改實(shí)例(利用彈框添加、修改),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09web項(xiàng)目開(kāi)發(fā)之JS函數(shù)防抖與節(jié)流示例代碼
這篇文章主要介紹了web項(xiàng)目開(kāi)發(fā)之JS函數(shù)防抖與節(jié)流實(shí)現(xiàn)的示例代碼及原理解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助2021-09-09Javascript優(yōu)化技巧之短路表達(dá)式詳細(xì)介紹
這篇文章主要介紹了Javascript優(yōu)化技巧之短路表達(dá)式詳細(xì)介紹,本文講解了什么是短路表達(dá)式,并給出了一些示例,需要的朋友可以參考下2015-03-03