使用navigator.geolocation来获取用户的地理位置信息
使用navigator.geolocation来获取用户的地理位置信息
W3C 中新添加了一个名为 Geolocation的 API 规范,Geoloaction API的作用就是通过浏览器获取用户的地理位置。我们可以使用navigator.geolocation来简单的获取用户的地理位置信息。本文中将简单介绍下W3C的Geolocation。
Geolocation在javascript的navigator 对象中,我们可以通过 navigator.geolocation 来使用它。不支持 geolocation 的浏览器并不包含这一对象,那么可以通过下面的代码来做能力检测,对不同的浏览器做不同的处理。
if (navigator.geolocation) {
alert( ' 浏览器支持 geolocation ' );
}else{
alert( ' 浏览器不支持 geolocation ' );
}
在访问 geolocation 对象时,即调用 geolocation 下面的方法时,浏览器会弹出提示,询问用户是否许可网站提供的位置服务,只有在得到用户许可过后,服务才会继续,否则将被停止,在稍后你将会了解到,我们能够捕获到用户拒绝服务的动作。下面这张图分别是 Chrome , Firefox 和 Opera 在初次访问 geolocation 时,给用户的提示: 初次使用geolocation时的警告框
常用的navigator.geolocation对象有以下三种方法:
1获取当前地理位置:navigator.geolocation.getCurrentPosition(success_callback_function, error_callback_function, position_options)
2持续获取地理位置:navigator.geolocation.watchPosition(success_callback_function, error_callback_function, position_options)
3清除持续获取地理位置事件:navigator.geolocation.clearWatch(watch_position_id)
其中success_callback_function为成功之后处理的函数,error_callback_function为失败之后返回的处理函数,参数position_options是配置项,由JSON格式传入:
4enableHighAccuracy:true/false,它将告诉浏览器是否启用高精度设备,所谓的高精度设备包含但不局限于前面所提到的 GPS 和 WIFI,值为 true 的时候,浏览器会尝试启用这些设备,默认指为 true,在这种情况下,浏览器会尽可能地进行更为精确的查询,简单地说,如果用户有可用的 GPS 设备,会返回 GPS 设备的查询结果,IP 是最后的选择,对于移动设备来说,网络接入点(基站)或许成为另一个选择,对此我还没有完全了解,但根据测试,即时没有任何额外功能的手机,也能够得到更为精确的查询结果。
5maximumAge:单位毫秒,告诉设备缓存时间,主要用于设备的省电或者节省带宽方面。
6timeout:单位毫秒,超时事件,获取位置信息时超出设定的这个时长,将会触发错误,捕获错误的函数将被调用,并且错误码指向TIMEOUT。
例如下面的代码:
var geo=navigator.geolocation.getCurrentPosition(geo_success, geo_error, {enableHighAccuracy:true,
maximumAge:30000,
timeout:27000}); 获取当前地理位置方法:navigator.geolocation.getCurrentPosition
当获得用户的许可过后,便一切就绪。我们将通过 geolocation 下的 getCurrentPosition 方法来获取用户当前的地理位置信息。
1、正确返回地理位置信息的处理函数
例如我们的成功处理函数这样写:
function getPositionSuccess( position ){
var lat = position.coords.latitude;
var lng = position.coords.longitude;
document.write( "您所在的位置: 经度" + lat + ",纬度" + lng );
}
处理函数中的position 对象包含了用户的地理位置信息,该对象下面的 coords 子对象包含了用户所在的纬度和经度信息,通过 position.coords.latitude 可以访问纬度,而 position.coords.longitude 中存放了经度的信息,用户的位置信息越精确,这两个数字后面的小数点越长。事实上,在 Firefox 中,position 对象下还附带有另一个 address 对象,这个对象包含这个经纬度下的国家名,城市名甚至街道名,例如下面的代码:
function getPositionSuccess( position ){
var lat = position.coords.latitude;
var lng = position.coords.longitude;
alert( "您所在的位置: 经度" + lat + ",纬度" + lng );
if(typeof position.address !== "undefined"){
var country = position.address.country;
var province = position.address.region;
var city = position.address.city;
alert(' 您位于 ' + country + province + '省' + city +'市');
}
}
coords其他返回信息:
7coords.accuracy:返回经纬度的精度(米)
8coords.speed :速度
9coords.altitude :当前的高度,海拔(米)
10coords.altitudeAccuracy:高度的精度(米)
11coords.heading:朝向
2、返回错误时的处理函数
上面都是成功获取到用户位置信息的处理,但是出现问题的情况在所难免,当获取用户的位置信息出错时,传递到 getCurrentPosition 的第二个函数类型参数被调用,一个包含具体出错信息的对象会被传递进去,错误将被捕获。
function getPositionError(error){
switch(error.code){
case error.TIMEOUT :
alert( " 连接超时,请重试 " );
break;
case error.PERMISSION_DENIED :
alert( " 您拒绝了使用位置共享服务,查询已取消 " );
break;
case error.POSITION_UNAVAILABLE :
alert( " 亲爱的火星网友,非常抱歉,我们暂时无法为您所在的星球提供位置服务 " );
break;
}
}
error 对象下面,存放了3个常量:
12TIMEOUT:表示获取信息超时。
13PERMISSION_DENIED:表示用户选择了拒绝了位置服务。
14POSITION_UNAVAILABLE:表示位置不可知。
说明:而每一次出错时 error.code 将指向3个常量之中的一个。
移动设备持续获取地理位置方法:navigator.geolocation.watchPosition
对于使用移动设备的用户来说,位置并不是固定的,W3C 当然也考虑到了这一点,watchPosition 是一个专门用来处理这一情况的方法,watchPosition 被调用后,浏览器会跟踪设备的位置,每一次位置的变化,watchPosition 中的代码都将会被执行。对于致力于移动设备 web 开发的同学来说,这个方法是及其重要的,它也许将会改变 web 移动客户端的格局。
使用navigator.geolocation.clearWatch既可以清除navigator.geolocation.watchPosition的监控事件。
Geolocation实例演示
查看Geolocation实例演示
写在最后
定位一般采用的wifi会比较准确,采用IP的时候一般会定位到所在的城市中心,更多关于地图定位的文章:
15php获取来访者IP信息
16php、js两种不同方式根据关键词返回经纬度接口【基于Google map API】
17根据IP返回地理位置地址以及地理经纬度的方法
18基于Google地图的根据IP返回地理位置的接口
使用navigator.geolocation来获取用户的地理位置信息的更多相关文章
- 使用纯真IP库获取用户端地理位置信息
引言 在一些电商类或者引流类的网站中经常会有获取用户地理位置信息的需求,下面我分享一个用纯真IP库获取用户地理位置信息的方案. 正文 第一步:本文的方案是基于纯真IP库的,所以首先要去下载最新的纯真I ...
- 如何获取用户的地理位置-浏览器地理位置(Geolocation)API 简介
如何获取用户的地理位置-浏览器地理位置(Geolocation)API 简介 一.总结 一句话总结:Geolocation API(地理位置应用程序接口)提供了一个可以准确知道浏览器用户当前位置的方法 ...
- js获取用户实时地理位置
js获取用户实时地理位置 if(navigator.geolocation) { var id = navigator.geolocation.watchPosition(function(posit ...
- web网站如何获取用户的地理位置
web网站如何获取用户的地理位置 一.总结 一句话总结:通过gps知道用户的经度和纬度,然后通过经度和纬度在在地图(google或者百度)上面显示位置. 1.html5如何通过gps知道用户的经度和纬 ...
- 微信授权获取用户openId等信息
在我们开发小程序的时候,需要通过授权获取用户的信息. 第一种使用wx.getUserInfo直接获取微信头像,昵称 // 必须是在用户已经授权的情况下调用 wx.getUserInfo({ succe ...
- JS window对象 screen对象 screen对象用于获取用户的屏幕信息。 语法: window.screen.属性
screen对象 screen对象用于获取用户的屏幕信息. 语法: window.screen.属性 对象属性:
- $_SERVER['HTTP_USER_AGENT']:在PHP中HTTP_USER_AGENT是用来获取用户的相关信息的,包括用户使用的浏览器,操作系统等信息
在PHP中HTTP_USER_AGENT是用来获取用户的相关信息的,包括用户使用的浏览器,操作系统等信息. 我机器:操作系统:WIN7旗舰版 64操作系统 以下为各个浏览器下$_SERVER['HTT ...
- 手机端获取用户详细地理位置(高德地图API)
项目开发需要获取用户详细的地理位置信息,使用了高德地图API接口 1,注册高德地图开发者账号获取开发者Key 2,页面调用 <script type="text/javascript& ...
- 如何获取用户的地理位置? && html5 地理位置
推荐网站 https://html5demos.com/geo/ 我们有时候可能希望首先获得用户的地理位置,然后根据不同的地理位置(更具针对性地)推送不同的信息等等. 下面这段代码就可以在你有jQue ...
随机推荐
- Lyft押重注于苹果编程语言Swift
Lyft押重注于苹果编程语言Swift 1年后获得丰厚回报BI中文站 8月22日报道 一年多以前,打车应用Lyft做出重大决定,决心押重注于苹果开发的编程语言Swift,用这种编程语言重写其所有iPh ...
- pwnable.kr-random
题目 首先我们要对rand&srand有个总体的看法:srand初始化随机种子,rand产生随机数,下面将详细说明. rand(产生随机数) 表头文件: #include 定义函数 :int ...
- 面试复习(C++)之冒泡排序
第一次写技术博客,先只贴代码吧. #include <iostream> using namespace std; void Bubble(int *arr,int len) { int ...
- windows8.1下常用编辑器安装配置(emacs/vim/sublime text3)
一.下载:在emacs:http://mirrors.ustc.edu.cn/gnu/emacs/windows/里下载emacs-24.3-bin-i386.zip.解压到自定目录,双击bin文件夹 ...
- MVVM ObservableCollection<> ListView
目标:在ListView中,设两列,一列表示人的姓名,一列表示年龄,用ObservableCollection<>来实现. 编程: 1)定义类Person public class ABC ...
- Ubuntu下freeradius的EAP-MD5,PEAPv0/EAP-MSCHAPv2,EAP-TTLS/MD5,EAP-TTLS/MSCHAPv2方式认证(基于mysql)
基于freeradius+mysql,今天验证下freeradius的EAP认证:1.EAP-MD5:2.EAP-PEAP 一.EAP-MD5方式认证 1.修改配置文件 (1)/usr/local/e ...
- Spark MLlib Data Type
MLlib 支持存放在单机上的本地向量和矩阵,也支持通过多个RDD实现的分布式矩阵.因此MLlib的数据类型主要分为两大类:一个是本地单机向量:另一个是分布式矩阵.下面分别介绍一下这两大类都有哪些类型 ...
- 2015-2016最火的Android开源项目--github开源项目集锦(不看你就out了)
标签: Android开发开源项目最火Android项目github 2015-2016最火的Android开源项目 本文整理与集结了近期github上使用最广泛最火热与最流行的开源项目,想要充电与提 ...
- javascript:window.history.go(-1)
history是你浏览过的网页的url(简单的说就是网址)的集合,也就是你的浏览器里的那个历史记录.它在js里是一个内置对象,就跟document一样,它有自己的方法,go就是其中一个. 这个方法的参 ...
- 招聘信息:无线产品研发总监 60-100W
招聘信息:某知名电商公司诚招: 无线产品研发总监 60-100W 招聘人数:1名 岗位描述: 熟悉互联网产品业务流程,完成产品功能的概念设计个原型展示: 进行市场调查和分析,相关用户研究和信息整理,提 ...