H5十大新特性(前端面试新手必背)(9)

简介: H5十大新特性(前端面试新手必背)(9)

6、地理位置

地理位置能够识别你的定位,并且与别人共享地理信息。那么怎么获取地理位置信息呢?


获取地理位置的方法?


1 通过ip地址


2 电脑上的位置信息定位


利用基站获取网络位置,只能获取大致位置,不够精确。

通过卫星定位获取经纬度信息的GPS设备,误差很小,位置精准。但GPS开启定位有延迟。

attention:浏览器必须在用户允许情况下才可以发送用户的位置信息给服务器。


地理位置API


Q:什么是API?


A:API是Application Programming Interface,即应用程序接口,是预先定义的接口(函数,http接口)


(1)调用位置函数


function get_location() {
  navigator.geolocation.getCurrentPosition(show_map, handle_error, PositionOptions);
}//这段js代码功能是触发浏览器弹出信息条,询问user是否分享地理位置。
//show_map是获取位置信息成功的回调函数
//handle_error是获取位置信息失败的回调函数
//PositionOptions是获取地理位置的设置对象


(2)show_map获取地理位置


function show_map(position) {
  var latitude = position.coords.latitude;//获取纬度
  var longitude = position.coords.longitude;//获取经度
}//回调函数要传入position对象
//position 对象的属性:
//coords.latitude 纬度,度
//coords.longtitude 经度,度
//coords.altitude 海拔,米
//coords.accuracy 精确度,米
//coords.altitudeAccuracy 海拔精确度,米
// coords.heading 方向,度,顺时针,以正北为基准
//coords.speed 速度,米/秒
//timestamp 时间戳,类似 Date() 对象
//这些属性会因为用户的设备和后台定位的服务器不同而出现属性值为null


(3)handle_error容错处理


function handle_error(e) {
  switch(e.code)  {//code错误类型
    case e.PERMISSION_DENIED:
      //用户拒绝对获取地理位置的请求。
          //user点击不共享或者拒绝位置共享
      break;
    case e.POSITION_UNAVAILABLE:
      //位置信息是不可用的。
          //网络不可用或者无法连接到获取位置信息的卫星
      break;
    case e.TIMEOUT:
      //请求用户地理位置超时。
          //网络可用但是计算超时间
      break;
    case e.UNKNOWN_ERROR:
      //未知错误。
      break;
  }
}


(4)PositionOptions 对象设置


navigator.geolocation.getCurrentPosition(show_map, handle_error, {enableHighAccuracy: true,timeoout: 170000, maximumAge: 87000})
//enableHighAccuracy 开启高精度定位,默认 false
//timeout字面意思,网络请求超时
//maximumAge允许user将一定时间内缓存的位置信息快速返回给Web应用,默认值0ms


(5)watchPosition() 持续获取

定位检测用户位置的更改,设备自己会找寻一个最佳的时间间隔,定时更改位置信息。


var watch = navigator.geolocation.watchPosition(show_map, handle_error, {enableHighAccuracy: true,timeoout: 170000, maximumAge: 87000})
clearWatch(watch);//这个方法用于停止监测user位置信息的更改。
相关文章
|
29天前
|
前端开发 JavaScript 网络协议
前端最常见的JS面试题大全
【4月更文挑战第3天】前端最常见的JS面试题大全
48 5
|
2月前
|
移动开发 前端开发 Android开发
mPaaS 常见问题之移动开发平台 mpaas的H5 前端 Kylin 框架引入vant后包特别大如何解决
mPaaS(移动平台即服务,Mobile Platform as a Service)是阿里巴巴集团提供的一套移动开发解决方案,它包含了一系列移动开发、测试、监控和运营的工具和服务。以下是mPaaS常见问题的汇总,旨在帮助开发者和企业用户解决在使用mPaaS产品过程中遇到的各种挑战
43 0
|
4月前
|
设计模式 前端开发 算法
No210.精选前端面试题,享受每天的挑战和学习
No210.精选前端面试题,享受每天的挑战和学习
No210.精选前端面试题,享受每天的挑战和学习
|
4月前
|
消息中间件 缓存 前端开发
No209.精选前端面试题,享受每天的挑战和学习
No209.精选前端面试题,享受每天的挑战和学习
No209.精选前端面试题,享受每天的挑战和学习
|
4月前
|
前端开发 JavaScript Java
No208.精选前端面试题,享受每天的挑战和学习
No208.精选前端面试题,享受每天的挑战和学习
No208.精选前端面试题,享受每天的挑战和学习
|
4月前
|
存储 JSON 前端开发
No206.精选前端面试题,享受每天的挑战和学习
No206.精选前端面试题,享受每天的挑战和学习
No206.精选前端面试题,享受每天的挑战和学习
|
5天前
|
前端开发 JavaScript 开发者
【Web 前端】css3的新特性有哪些?
【4月更文挑战第22天】【Web 前端】css3的新特性有哪些?
|
5天前
|
存储 移动开发 前端开发
【Web 前端】H5新特性有哪些?
【4月更文挑战第22天】【Web 前端】H5新特性有哪些?
|
17天前
|
存储 前端开发 API
IndexedDB的异步操作特性对于前端开发者来说有什么挑战和注意事项吗?
IndexedDB是浏览器的客户端数据库,用于前端数据存储。其异步操作特性带来挑战,要求开发者熟悉异步编程,处理回调函数或Promise。注意事务管理,合理控制事务生命周期,防止阻塞。数据版本管理是关键,需处理升级和兼容性问题。错误处理必不可少,确保程序稳定性。性能优化涉及索引设计和查询优化,避免影响应用性能。理解并应对这些挑战,能有效利用IndexedDB构建高效Web应用。
|
27天前
|
人工智能 前端开发 JavaScript
【前端设计】HTML+CSS+JavaScript基本特性
【前端设计】HTML+CSS+JavaScript基本特性