Day21 - Geolocation 中文指南

PascalXie 發布于2019-08-21 11:55 / 1946人閱讀

摘要：完整中文版指南及視頻教程在從零到壹全棧部落。在此獲取到的信息為，以回調函數的形式返回，當獲取到位置信息之后，在動態的修改頁面中顯示的內容和指南針旋轉的角度。語法參數成功時候的回調函數，同時傳入一個對象當作參數。

本文出自：春哥個人博客：http://www.liyuechun.org
作者：?黎躍春-追時間的人
簡介：JavaScript30 是 Wes Bos 推出的一個 30 天挑戰。項目免費提供了 30 個視頻教程、30 個挑戰的起始文檔和 30 個挑戰解決方案源代碼。目的是幫助人們用純 JavaScript 來寫東西，不借助框架和庫，也不使用編譯器和引用。現在你看到的是這系列指南的第 21 篇。完整中文版指南及視頻教程在從零到壹全棧部落。

運行項目

liyuechun:21 - Geolocation yuechunli$ npm install
......
liyuechun:21 - Geolocation yuechunli$ npm start

> gum@1.0.0 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天的目的是練習NavigatorGeolocation.geolocation這一webAPI的使用，通過使用此API可以訪問到設備的位置信息。這允許網站或應用根據用戶的位置提供個性化結果。

UI源碼





  
  Document
  



  


  
    0
    KM/H

JS源碼

可以看到只要通過調用navigator.geolocation的watchPosition方法就可以獲取到位置的信息。

在此獲取到的信息為data，以回調函數的形式返回，當獲取到位置信息之后，在動態的修改頁面中speed顯示的內容和指南針旋轉的角度。

Geolocation.watchPosition()

參考文檔

Geolocation.watchPosition() 用于注冊監聽器，在設備的地理位置發生改變的時候自動被調用。也可以選擇特定的錯誤處理函數。

該方法會返回一個 ID，如要取消監聽可以通過 Geolocation.clearWatch() 傳入該 ID 實現取消的目的。

語法

id = navigator.geolocation.watchPosition(success[, error[, options]])

參數

success：成功時候的回調函數，同時傳入一個 Position 對象當作參數。

error(可選)：失敗時候的回調函數，可選，會傳入一個 PositionError 對象當作參數。

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

GPU云服務器云服務器 webrtc權威指南中文 webrtc 權威指南中文 webrtc權威指南中文 webrtc權威指南中文版

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87277.html

JavaScript 30 - 一起做一次了不起的挑戰

摘要：加入我們，一起挑戰吧掃碼申請加入全棧部落 JavaScript 30 - 一起做一次了不起的挑戰 (Node+Vue+微信公眾號開發)企業級產品全棧開發速成周末班首期班(10.28號正式開班，歡迎搶座) 在Github上看到了wesbos的一個Javascript30天挑戰的repo，旨在使用純JS來進行練習，不允許使用任何其他的庫和框架，該挑戰共30天，我會在這里復現這30天遇到的挑...

1treeS 2019-08-20 18:11 評論0 收藏0
Day20 - 語言識別系統中文指南

摘要：語言識別系統中文指南本文出自春哥個人博客作者黎躍春追時間的人簡介是推出的一個天挑戰。完整中文版指南及視頻教程在從零到壹全棧部落。 Day20 - 語言識別系統中文指南本文出自：春哥個人博客作者：?黎躍春-追時間的人簡介：JavaScript30 是 Wes Bos 推出的一個 30 天挑戰。項目免費提供了 30 個視頻教程、30 個挑戰的起始文檔和 30 個挑戰解決方案源代碼。目的是...

Binguner 2019-08-21 11:52 評論0 收藏0
Day17 - 數組排序中文指南

摘要：一個用來創建新子字符串的函數，該函數的返回值將替換掉第一個參數匹配到的結果。返回值一個部分或全部匹配由替代模式所取代的新的字符串。 Day17 - 數組排序中文指南作者：?黎躍春-追時間的人簡介：JavaScript30 是 Wes Bos 推出的一個 30 天挑戰。項目免費提供了 30 個視頻教程、30 個挑戰的起始文檔和 30 個挑戰解決方案源代碼。目的是幫助人們用純 Java...

coordinate35 2019-08-20 18:36 評論0 收藏0
2017-07-08 前端日報

摘要：前端日報精選精讀與提案知乎專欄第期認識引擎記錄一次利用工具進行性能優化的真實案例簡書中的使用規則教程繼承的實現方法個人文章中文譯組件渲染性能探索個人文章周刊第期表單性能的改進實踐知乎專欄簡單可重用的圖表庫知乎專欄 2017-07-08 前端日報精選精讀 TC39 與 ECMAScript 提案 - 知乎專欄【第989期】認識 V8 引擎記錄一次利用 Timeline/Perform...

王巖威 2019-08-20 17:51 評論0 收藏0
Day07 - Array Cardio 中文指南二

摘要：中文指南二作者簡介是推出的一個天挑戰。完整中文版指南及視頻教程在從零到壹全棧部落。第七天的練習是接著之前中文指南一的練習，繼續熟練數組的方法，依舊沒有頁面顯示效果，所以請打開瀏覽器的面板進行調試運行。 Day07 - Array Cardio 中文指南二作者：?liyuechun 簡介：JavaScript30 是 Wes Bos 推出的一個 30 天挑戰。項目免費提供了 30 個...

Forest10 2019-08-20 18:18 評論0 收藏0