HTML5 Geolocation(地理定位)
一、背景
- 在HTML规范中,增加了获取用户地理信息的API,这样使得可以基于用户位置开发互联网应用,即基于位置服务
- 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的。
- Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 支持Geolocation(地理定位).
- Geolocation(地理定位)对于拥有 GPS 的设备,地理定位更加精确。
二、获取当前地信息
- navigator.geolocation.getCurrentPosition(successCallback,errorCallback)
三、重复获取当前地理信息
- navigator.geolocation.watchPosition(successCallback,errorCallback)
四、使用
①当获取地理信息成功后,会调用successCallback,并返回一个包含位置信息的对象position。
- position.coords.latitude 纬度
- position.coords.longitude 经度
- position.coords.accuracy 精度
- position.coords.altitude 海拔高度
②当获取地理信息失败后,会调用errorCallback,返回错误信息error
- <script>
- if(navigator.geolocation){
- navigator.geolocation.getCurrentPosition(function(position){
- // 获取地理位置成功
- console.log(position.coords.latitude);//纬度
- console.log(position.coords.longitude);//经度
- console.log(position.coords.accuracy);//精度
- console.log(position.coords.altitude);//海拔高度
- },function(positionError){
- // 取地理位置失败
- console.log(positionError);//错误信息
- // 因为是从谷歌返回的数据,国家政策的原因,无法获取(需要翻墙)
- // Network location provider at 'https://www.googleapis.com/' : No response received
- })
- }
- </script>
③在实际开发中,通过调用第三方API(如百度地图)来实现地理位置定位信息,这些API都是基于用户当前位置(经纬度)当做参数传递,就可以实现相应的功能
比如:百度地图开放平台
HTML5 Geolocation(地理定位)的更多相关文章
- HTML5 总结-地理定位-6
HTML5 地理定位 定位用户的位置 HTML5 Geolocation API 用于获得用户的地理位置. 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的. 浏览器支持 Int ...
- html5 Geolocation(地理位置定位)学习
1.html5 Geolocation html5 Geolocation API 使用很简单,请求一个位置信息,如果用户同意,浏览器会返回一个位置信息,该位置是通过用户的底层设备(手机,电脑) 提供 ...
- Geolocation地理定位
地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理及各个 ...
- Geolocation 地理定位
地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理及各个 ...
- 【HTML5】地理定位
<!DOCTYPE html> <html> <body> <p id="demo">点击这个按钮,获得您的坐标:</p> ...
- 用HTML5、地理定位API和Web服务来开发移动应用
HTML 5 是一项让人振奋的技术,这有着充分的理由.这将会是一次技术突破,因为它可以将桌面应用程序功能带入浏览器中.除了传统浏览器外,对于移动浏览器,其潜力甚至更大.不仅如此,最流行的移动浏览器甚至 ...
- HTML5——拖放 地理定位 视频 音频 新的input类型
拖放 ————> 设置元素为可拖放 拖动什么 放到何处 进行放置 实例[来回拖放] 地理定位 使用地理定位 处理错误和拒绝 在地图中显示结果 基于脚本的交互式地图 给定位置的信息 用户移动时 ...
- HTML5 学习06——Geolocation(地理定位)
HTML5 Geolocation(地理定位) HTML5 Geolocation API 用于获得用户的地理位置. 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的. HTML ...
- HTML5学习笔记 Geolocation(地理定位)
HTML5 Geolocation(地理定位)用于定位用户的位置. 定位用户的位置 html5 Geolocation API用于获得用户的地理位置 鉴于该特性可能低侵犯用户的隐私,除非用户同意,否则 ...
- HTML5: HTML5 Geolocation(地理定位)
ylbtech-HTML5: HTML5 Geolocation(地理定位) 1.返回顶部 1. HTML5 Geolocation(地理定位) HTML5 Geolocation(地理定位)用于定位 ...
随机推荐
- vuex的Store简单使用过程
介绍 Store的代码结构一般由State.Getters.Mutation.Actions这四种组成,也可以理解Store是一个容器,Store里面的状态与单纯的全局变量是不一样的,无法直接改变st ...
- lsb_release -a linux查看版本未找到命令
解决方案 yum install -y redhat-lsb 安装完后
- 视频推流模式HLS,HTTP,RTSP,RTMP协议的区别
HTTP: 先通过服务器将FLV下载到本地缓存,然后再通过NetConnection的本地连接来播放这个FLV,这种方法是播放本地的视频,并不是播放服务器的视频.因此在本地缓存里可以找到这个FLV.其 ...
- C#采集摄像头实时画面和抓拍
在.net中,并没有简单直接的操纵摄像头的类.那么如何简单快捷地采集摄像头的画面,进行抓拍等操作呢?答案是调用SharpCapture!专业采集摄像头画面等数据的类库.下面开始演示关键代码,您也可以在 ...
- 原生JavaScript实现轮播图
---恢复内容开始--- 实现原理 通过自定义的animate函数来改变元素的left值让图片呈现左右滚动的效果 HTML: <!DOCTYPE html> <html> &l ...
- java实现在线预览--poi实现word、excel、ppt转html
java实现在线预览 - -之poi实现word.excel.ppt转html 简介 java实现在线预览功能是一个大家在工作中也许会遇到的需求,如果公司有钱,直接使用付费的第三方软件或者云在线预览服 ...
- 关于ABViewer的疑问解答
很多 CAD小伙伴都对 ABViewer 这款软件不陌生吧.ABViewer 是用来处理图纸和工程文档管理的一款通用软件.可以用它来查看,编辑,转换,测量和打印DWG和其他CAD文件,以及3D模型和光 ...
- 使用SAP open connector调用第三方系统的API
我们把hubspot这个SaaS CRM作为第三方系统,首先登录hubspot,创建一个新的API key: 把创建的key拷贝到剪切板里: 然后登录SAP Cloud for Customer上的o ...
- 使用Hybris commerce的promotion rule进行促销活动
backoffice Marketing菜单下面,新建一个Promotion rule: Promotion的条件,设置成针对商城里所有的数码相机: Promotion触发条件在Conditions区 ...
- http请求的几种content-type
1. 2.二进制文件 3.form-data 数据:a=1 总结: 1.对于我自己的写的服务来说,只要是raw,接收到的都是二进制字符: 2.如果是urlencode,接收到的是拼接的字符串(和使用p ...