有些应用程序需要获取用户的地理位置信息，比较经典的例子就是在显示地图时标注自己的当前位置。过去，获取用户的地理位置信息需要借助第三方地址数据库或专业的开发包（如Google Gears API）。HTML5定义了Geolocation API规范，可以通过浏览器获取用户的地理位置，这无疑给有相关需求的用户提供了极大的便利。

1、概述

HTML5 Geolocation API 定义了与主机设备的位置信息相关的高层接口。

1）什么是浏览器的地理位置

浏览器的地理位置实际上就是安装浏览器的硬件设备的位置，如经纬度。位置信息的通常来源包括以下几种。

GPS（全球定位系统）：这种方式可以提供很精确的定位，但需要专门的硬件设备，定位效率也不高。
IP地址：多用于计算机设备，定位并不准确。
无线射频标签（Radio Frequency Identification，RFID）：可以通过读卡器的信号、报文到达时间和定位器等数据确定标签的位置。
WiFi：无线上网时，可以通过Wi-Fi热点（AP或无线路由器）来定位客户端设备。
GSM/CDMA小区标识码：可以根据手机用户的基站数据定位手机设备。
用户输入：除了以上方法外，还允许用户自定义位置信息。

提示：通过不同渠道获得的浏览器的地理位置信息是有误差的，因此并不能保证Geolocation API 返回的是设备的实际位置。

2）浏览器对获取地理位置信息的支持情况

在JavaScript中可以使用navigator.geolocation属性检测浏览器对获取地理位置信息的支持情况。如果navigator.geolocation等于True，则表明当前浏览器支持获取地理位置信息；否则表明不支持。

在网页中定义一个按钮，单击此按钮时，会检测浏览器是否支持获取地理位置信息。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Test</title><style>* {margin: 0;padding: 0;}</style>
</head><body><button id="check" onclick="check();">检测浏览器是否支持获取地理位置信息</button><script>function check() {if (navigator.geolocation) {alert("您的浏览器浏览器支持获取地理位置信息。");} else {alert("您的浏览器浏览器不支持获取地理位置信息。");}}</script></body></html>

**各主流浏览器对获取地理位置信息的支持情况**
浏览器	对获取地理位置信息的支持情况
Chrome	5.0及以后的版本支持
Firefox	3.5及以后的版本支持
Internet Explorer	9.0及以后的版本支持
Opera	10.6及以后的版本支持
Safari	5.0及以后的版本支持

另外，安装下列操作系统的手机设备也支持获取地理位置信息。

Android 2.0+
iPhone 3.0+
Opera Mobile 10.1+
Symbian（S60 3rd & 5th generation）
Blackberry OS 6
Maemo

2、获取地理位置信息

下面介绍使用Geolocation API 获取地理位置信息的具体方法。

1）getCurrentPosition()方法

调用getCurrentPosition()方法可以获取地理位置信息，也就是经纬度。getCurrentPosition()方法的语法如下。

var retval = geolocation.getCurrentPosition(successCallback, errorCallback, options);

参数说明如下。

successCallback：当成功获取地理位置信息时使用的回调函数句柄。

回调函数successCallback有一个参数position对象，其中包含获取到的地理位置信息。position对象包含2个属性，如下表所示。

**position对象的属性**
属性	说明
coords	包含地理位置信息的coordinates对象。coordinates对象包含7个属性，如下表所示
timestamp	获取地理位置信息的时间

**coordinates对象的属性**
属性	说明
accuracy	latitude和longitude属性的精确性，单位是m
altitude	海拔
altitudeAccuracy	altitude属性的精确性
heading	朝向，即设备正北顺时针前进的方位
latitude	纬度
longitude	经度
speed	设备外部环境的移动速度，单位是m/s

errorCallback：可选参数，当获取地理位置信息失败时调用的回调函数句柄。

回调函数errorCallback包含一个positionError对象参数，positionError对象包含两个属性，如下表所示。

**positionError对象的属性**
属性	说明
code	整数，错误编号
message	错误描述

如果不处理错误，则可以在调用getCurrentPosition()方法时，在errorCallback参数的位置使用null。

options：可选参数，是一个positionOptions对象，用于指定获取用户位置信息的配置参数。

positionOptions对象的数据格式为JSON，有3个可选的属性，如下表所示。

**positionOptions对象的属性**
属性	说明
enableHighAccuracy	布尔值，表示是否启用高精确度模式，如果启用这种模式，浏览器在获取位置信息时可能需要耗费更多的时间
timeout	整数，超时时间，单位为ms，表示浏览器需要在指定的时间内获取位置信息，如果超时则会触发errorCallback
maximumAge	整数，表示浏览器重新获取位置信息的时间间隔

使用getCurrentPosition()方法获取地理位置信息。（翻墙）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Test</title><style>* {margin: 0;padding: 0;}</style>
</head><body><p id="demo">单击按钮获取你的位置信息</p><button onclick="getLocation();">获取你的位置信息</button><script>var x = document.getElementById('demo');function getLocation() {if (navigator.geolocation) {navigator.geolocation.getCurrentPosition(showPosition);} else {x.innerHTML = "你的浏览器不支持Geolocation API。";}}function showPosition(position) {x.innerHTML = "纬度：" + position.coords.latitude + "<br>经度：" + position.coords.longitude;}</script></body></html>

提示：单击此按钮时，浏览器会询问用户是否允许该网站获取你的位置信息。单击“允许”按钮才可以成功获取地理位置信息。

显示经纬度很不直观，非专业人士很难直接定位，可以利用Google地图来显示当前位置的地图，这里就不演示了，有兴趣的可以自己去尝试。

2）watchPosition()方法

调用watchPosition()方法可以监听和跟踪客户端的地理位置信息。watchPosition()方法的语法如下。

var watchId= geolocation.watchPosition(successCallback, errorCallback, options);

watchPosition()方法的参数与getCurrentPosition()方法的参数相同，watchPosition()方法和getCurrentPosition()方法的主要区别是因为它会持续告诉用户位置的改变，所以基本上它一直在更新用户的位置。用户在移动时，这个功能会非常有利于追踪用户的位置。

使用watchPosition()方法获取地理位置信息。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Test</title><style>* {margin: 0;padding: 0;}</style>
</head><body><p id="demo">单击按钮获取你的位置信息</p><button onclick="getLocation();">获取你的位置信息</button><script>var x = document.getElementById('demo');function getLocation() {if (navigator.geolocation) {navigator.geolocation.watchPosition(showPosition);} else {x.innerHTML = "你的浏览器不支持Geolocation API。";}}function showPosition(position) {x.innerHTML = "纬度：" + position.coords.latitude + "<br>经度：" + position.coords.longitude;}</script></body></html>

3）clearWatch()方法

调用clearWatch()方法可以停止监听和跟踪客户端的地理位置信息。通常与watchPosition()方法结合使用。clearWatch的语法如下。

var retval = geolocation.clearWatch(watchId);

参数watchId通常是watchPosition()方法的返回值，即停止该watchPosition()方法对地理位置信息的监听和跟踪。

获取浏览器的地理位置信息相关推荐

获取用户精准地理位置信息（百度地图）
获取用户精准地理位置信息步骤: 1.通过 navigator.geolocation.getCurrentPosition(showPosition, showError); 方法获取经纬度: 2.使 ...
通过百度地图API获取用户所在地理位置信息
目录 1.密匙申请 2.源代码 3.结果展示 1.密匙申请使用以下源码前,请先去百度地图开发平台申请密匙,前去申请:立即申请 2.源代码此次定位代码是通过H5的方式实现的 <html> ...
利用IP地址获取用户的地理位置信息
最近酷乐在项目中遇到一个需要获取用户IP信息并查询出用户地理位置信息的需求,代码如下: 1.首先获取用户具体的IP信息. <?php function getClientIp(){if (get ...
js获取浏览器当前经纬度信息
谷歌浏览器暂不支持 1.引入百度地图api和jq <script type="text/javascript" src="https://api.map.baidu ...
html5获取地理位置信息API
html5获取地理位置信息API 在HTML5中,可以看下如何使用Geolocation API来获得用户的地理位置信息,如果该浏览器支持的话,且设备具有定位功能,就能够直接使用这组API来获取当前位 ...
如何获取用户的地理位置-浏览器地理位置(Geolocation)API 简介
如何获取用户的地理位置-浏览器地理位置(Geolocation)API 简介一.总结一句话总结:Geolocation API(地理位置应用程序接口)提供了一个可以准确知道浏览器用户当前位置的方法 ...
根据地理位置多语言切换（1）- 获取地理位置信息
在手机应用的实现中经常会遇到需要语言切换用于满足用户环境的多样性.可以根据所处地理位置信息进行经纬度及国家/城市/地区的获取,可以根据此内容进行多语言情况的推荐及切换. 完成上述的想法需要进行几个功能 ...
手机端或PC端利用高德地图和腾讯地图获取用户当前位置信息
目录一.简介二.高德地图三.腾讯地图四.总结一.简介最近在项目中,有需要使用到获取用户当前地理位置信息的功能,获取当前用户位置保存到数据库中的场景,并且需要支持多种地图定位方式,我这里采用 ...
android根据ip获取查询省份,通过IP地址获取省份城市位置信息
private String mResult = null; private String mProvinceName; //省份 private String mChCityName; //城市 p ...
查看浏览器响应头信息数据
获取浏览器响应头部信息以Microsoft Edge和Google Chrome举例一.Microsoft Edge浏览器(点击查看) 二.Google Chrome浏览器(点击查看) 以Micr ...

获取浏览器的地理位置信息