Day21 - Geolocation 中文指南

PascalXie 发布于2019-08-21 11:55 / 1853人阅读

摘要：完整中文版指南及视频教程在从零到壹全栈部落。在此获取到的信息为，以回调函数的形式返回，当获取到位置信息之后，在动态的修改页面中显示的内容和指南针旋转的角度。语法参数成功时候的回调函数，同时传入一个对象当作参数。

本文出自：春哥个人博客：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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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