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位置信息的更改。
相关文章
|
4月前
|
前端开发
【前端web入门第四天】02 CSS三大特性+背景图
本文详细介绍了CSS的三大特性:继承性、层叠性和优先级,并深入讲解了背景图的相关属性,包括背景属性、背景图的平铺方式、位置设定、缩放、固定以及复合属性。其中,继承性指子元素自动继承父元素的文字控制属性;层叠性指相同属性后定义覆盖前定义,不同属性可叠加;优先级涉及选择器权重,包括行内样式、ID选择器等。背景图部分则通过具体示例展示了如何设置背景图像的位置、大小及固定方式等。
268 91
|
2月前
|
移动开发 前端开发 JavaScript
前端H5使用canvas画爱心以及笑脸
本文介绍了HTML5中的canvas元素及其基本用法,通过JavaScript在canvas上绘制图形。首先简述了canvas的功能,接着详细展示了如何使用`bezierCurveTo`方法绘制爱心和`arc`方法绘制笑脸,并附有示例代码及效果说明。最后总结了canvas在网页图形绘制上的应用潜力。
50 2
|
2月前
|
缓存 前端开发 JavaScript
前端小白也能掌握的高级技巧:如何让你的网页支持PWA特性?
【10月更文挑战第30天】随着互联网技术发展,渐进式网页应用(PWA)成为提升用户体验的重要手段。本文通过一个案例,介绍如何为在线问答社区网页应用添加PWA特性。从创建基本结构、添加Service Worker、创建Manifest文件到测试PWA特性,详细展示了每一步的操作方法。适合前端小白学习参考。
30 2
|
2月前
|
缓存 前端开发 JavaScript
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
67 1
|
4月前
|
Web App开发 前端开发 Linux
「offer来了」浅谈前端面试中开发环境常考知识点
该文章归纳了前端开发环境中常见的面试知识点,特别是围绕Git的使用进行了详细介绍,包括Git的基本概念、常用命令以及在团队协作中的最佳实践,同时还涉及了Chrome调试工具和Linux命令行的基础操作。
「offer来了」浅谈前端面试中开发环境常考知识点
|
4月前
|
Web App开发 存储 移动开发
前端基础(十七)_HTML5新特性
本文概述了HTML5的关键新特性,包括canvas图形绘制、多媒体的`video`和`audio`元素、本地存储功能、语义化标签(如`header`、`footer`、`nav`等)及其新增表单控件和属性(如`url`、`email`、`date`类型输入框等)。这些改进增强了网页的功能性和用户体验。
53 1
前端基础(十七)_HTML5新特性
|
5月前
|
存储 XML 移动开发
前端大厂面试真题
前端大厂面试真题
|
3月前
|
Web App开发 JavaScript 前端开发
前端Node.js面试题
前端Node.js面试题
|
5月前
|
存储 移动开发 前端开发
HTML5时代来临,这些新特性你掌握了吗?一篇文章带你玩转Web前端技术潮流!
【8月更文挑战第26天】HTML5(简称H5)作为新一代Web标准,相比HTML4带来了诸多增强功能。
74 2
|
5月前
|
存储 前端开发 JavaScript
44 个 React 前端面试问题
【8月更文挑战第18天】
62 2