資訊專欄INFORMATION COLUMN
摘要：完整中文版指南及視頻教程在從零到壹全棧部落。在此獲取到的信息為，以回調(diào)函數(shù)的形式返回，當(dāng)獲取到位置信息之后，在動態(tài)的修改頁面中顯示的內(nèi)容和指南針旋轉(zhuǎn)的角度。語法參數(shù)成功時候的回調(diào)函數(shù)，同時傳入一個對象當(dāng)作參數(shù)。
運(yùn)行項(xiàng)目本文出自：春哥個人博客：http://www.liyuechun.org
作者：?黎躍春-追時間的人
簡介：JavaScript30 是 Wes Bos 推出的一個 30 天挑戰(zhàn)。項(xiàng)目免費(fèi)提供了 30 個視頻教程、30 個挑戰(zhàn)的起始文檔和 30 個挑戰(zhàn)解決方案源代碼。目的是幫助人們用純 JavaScript 來寫東西，不借助框架和庫，也不使用編譯器和引用?，F(xiàn)在你看到的是這系列指南的第 21 篇。完整中文版指南及視頻教程在 從零到壹全棧部落。
liyuechun:21 - Geolocation yuechunli$ npm install ...... liyuechun:21 - Geolocation yuechunli$ npm start > [email protected] start /Users/liyuechun/Documents/js30/JavaScript30-liyuechun/21 - Geolocation > browser-sync start --directory --server --files "*.css, *.html, *.js" --https [Browsersync] Access URLs: ------------------------------------- Local: https://localhost:3000 External: https://192.168.1.7:3000 ------------------------------------- UI: http://localhost:3001 UI External: http://192.168.1.7:3001 ------------------------------------- [Browsersync] Serving files from: ./ [Browsersync] Watching files...效果圖
第21天的目的是練習(xí)NavigatorGeolocation.geolocation這一webAPI的使用，通過使用此API可以訪問到設(shè)備的位置信息。這允許網(wǎng)站或應(yīng)用根據(jù)用戶的位置提供個性化結(jié)果。
UI源碼JS源碼Document 0 KM/H
可以看到只要通過調(diào)用navigator.geolocation的watchPosition方法就可以獲取到位置的信息。
在此獲取到的信息為data，以回調(diào)函數(shù)的形式返回，當(dāng)獲取到位置信息之后，在動態(tài)的修改頁面中speed顯示的內(nèi)容和指南針旋轉(zhuǎn)的角度。
Geolocation.watchPosition()參考文檔
Geolocation.watchPosition() 用于注冊監(jiān)聽器，在設(shè)備的地理位置發(fā)生改變的時候自動被調(diào)用。也可以選擇特定的錯誤處理函數(shù)。
該方法會返回一個 ID，如要取消監(jiān)聽可以通過 Geolocation.clearWatch() 傳入該 ID 實(shí)現(xiàn)取消的目的。
語法
id = navigator.geolocation.watchPosition(success[, error[, options]])
參數(shù)
success：成功時候的回調(diào)函數(shù)， 同時傳入一個 Position 對象當(dāng)作參數(shù)。
error(可選)：失敗時候的回調(diào)函數(shù)，可選， 會傳入一個 PositionError 對象當(dāng)作參數(shù)。
options(可選)：一個可選的 PositionOptions 對象。
案例
var id, target, options;
function success(pos) {
var crd = pos.coords;
if (target.latitude === crd.latitude && target.longitude === crd.longitude) {
console.log("Congratulations, you reached the target");
navigator.geolocation.clearWatch(id);
}
}
function error(err) {
console.warn("ERROR(" + err.code + "): " + err.message);
}
target = {
latitude : 0,
longitude: 0
};
options = {
enableHighAccuracy: false,
timeout: 5000,
maximumAge: 0
};
id = navigator.geolocation.watchPosition(success, error, options);
源碼下載
Github Source Code
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/87277.html
摘要：加入我們，一起挑戰(zhàn)吧掃碼申請加入全棧部落 JavaScript 30 - 一起做一次了不起的挑戰(zhàn) (Node+Vue+微信公眾號開發(fā))企業(yè)級產(chǎn)品全棧開發(fā)速成周末班首期班(10.28號正式開班，歡迎搶座) 在Github上看到了wesbos的一個Javascript30天挑戰(zhàn)的repo，旨在使用純JS來進(jìn)行練習(xí)，不允許使用任何其他的庫和框架，該挑戰(zhàn)共30天，我會在這里復(fù)現(xiàn)這30天遇到的挑...
摘要：語言識別系統(tǒng)中文指南本文出自春哥個人博客作者黎躍春追時間的人簡介是推出的一個天挑戰(zhàn)。完整中文版指南及視頻教程在從零到壹全棧部落。 Day20 - 語言識別系統(tǒng)中文指南 本文出自：春哥個人博客作者：?黎躍春-追時間的人簡介：JavaScript30 是 Wes Bos 推出的一個 30 天挑戰(zhàn)。項(xiàng)目免費(fèi)提供了 30 個視頻教程、30 個挑戰(zhàn)的起始文檔和 30 個挑戰(zhàn)解決方案源代碼。目的是...
摘要：一個用來創(chuàng)建新子字符串的函數(shù)，該函數(shù)的返回值將替換掉第一個參數(shù)匹配到的結(jié)果。返回值一個部分或全部匹配由替代模式所取代的新的字符串。 Day17 - 數(shù)組排序中文指南 作者：?黎躍春-追時間的人 簡介：JavaScript30 是 Wes Bos 推出的一個 30 天挑戰(zhàn)。項(xiàng)目免費(fèi)提供了 30 個視頻教程、30 個挑戰(zhàn)的起始文檔和 30 個挑戰(zhàn)解決方案源代碼。目的是幫助人們用純 Java...
摘要：前端日報(bào)精選精讀與提案知乎專欄第期認(rèn)識引擎記錄一次利用工具進(jìn)行性能優(yōu)化的真實(shí)案例簡書中的使用規(guī)則教程繼承的實(shí)現(xiàn)方法個人文章中文譯組件渲染性能探索個人文章周刊第期表單性能的改進(jìn)實(shí)踐知乎專欄簡單可重用的圖表庫知乎專欄 2017-07-08 前端日報(bào) 精選 精讀 TC39 與 ECMAScript 提案 - 知乎專欄【第989期】認(rèn)識 V8 引擎記錄一次利用 Timeline/Perform...
摘要：中文指南二作者簡介是推出的一個天挑戰(zhàn)。完整中文版指南及視頻教程在從零到壹全棧部落。第七天的練習(xí)是接著之前中文指南一的練習(xí)，繼續(xù)熟練數(shù)組的方法，依舊沒有頁面顯示效果，所以請打開瀏覽器的面板進(jìn)行調(diào)試運(yùn)行。 Day07 - Array Cardio 中文指南二 作者：?liyuechun 簡介：JavaScript30 是 Wes Bos 推出的一個 30 天挑戰(zhàn)。項(xiàng)目免費(fèi)提供了 30 個...
閱讀 2924·2021-11-17 09:33
閱讀 1642·2021-10-12 10:13
閱讀 2468·2021-09-22 15:48
閱讀 2343·2019-08-29 17:19
閱讀 2597·2019-08-26 11:50
閱讀 1574·2019-08-26 10:37
閱讀 1740·2019-08-23 16:54
閱讀 2928·2019-08-23 14:14
