基于Geolocation API的地理位置应用构建

侯竺君　张佳

摘要：HTML5使得未来Web应用的JavaScript API得到发展，Geolocation API被大众支持。API开发者利用简单的代码来获取用户的当前位置，主要基于GPS导航的社交网络应用等。

关键词：HTML5；Web应用；API开发

中图分类号：TP39 文献标识码：A 文章编号：1007-9416（2018）09-0083-02

访问用户的位置信息之前，首先要得到用户的许可。如果页面尝试访问位置信息，浏览器会弹出一个对话框，请求用户许可。用户同意之后，浏览器则返回位置信息。

1 位置信息概述

1.1 位置信息来源

HTML 5 Geolocation API用来获取用户地理位置信息，不需要指定必须是在哪个设备上以及使用哪种底层技术来定位用户，它只是一个用于检索位置信息的API，通过该API检索的数据只有一定程度的准确性。它并不能保证设备返回的数据就是精确的。一般来说，设备可以使用的数据源如下所示：（1）IP地址。（2）GPS（全球定位系统）。（3）RFID（射频识别）。（4）WI-FI地址。（5）GSM或CDMA手机的ID（6）用户自定义的地理位置数据

1.2 位置信息表示方式

位置信息主要由一对纬度和经度坐标组成，经纬度坐标可以用以下两种方式表示：

十进制格式：如39.17882。DMS角度格式，如39°20′。

2 Geolocation对象

Geolocation API在浏览器中实现使用window. navigator. Geolocation对象，用于获得用户的地理位置，其中navigator为浏览器内置对象。由于该特性可能侵犯用户的隐私，因此浏览器将在访问位置信息前询问用户是否共享其位置信息，并且除非用户同意，否则用户位置信息不可用。

在使用地理位置API之前首先要检测浏览器是否支持，检测浏览器是否支持定位API，只需要检测geolocation是否存在于navigator中即可，可以使用如下语句进行检查：

if（navigator.geolocation）{

alert（'浏览器支持html5 geolocation'）； }

2.1 获取当前地理位置

使用getCurrentPosition方法获取用户当前的地理位置信息，此方法包含一个必选参数和两个可选参数，用法如下所示：

void getCurrentPosition（successCallback， errorCallback，options）；

successCallback必选参数，成功回调函数。errorCallback可选参数，失败回调函数。

options可选参数，此对象可设定信息的类型。

（1）getCurrentPosition方法的第一个参数是成功获取位置信息后的回调函数，使用方法如下所示：

navigator.geolocation.getCurrentPosition（function（position）{

//获取成功时的处理

}）；

获取到信息之后，回调函数中将传入位置对象position。该对象包含两个属性：一个是coords（坐标），包含当前位置信息；另一个是timestamp，表示获取到位置的时间戳。在实际开发中，coords的经度和纬度属性是大多数Web应用程序最常用的属性。

（2）getCurrentPosition（） 方法的第二个参数是当用户当前地理位置信息获取失败时所执行的回调函数。如果无法获取位置信息，则通过该回调函数向用户提示错误信息。

（3）getCurrentPosition（） 方法的第三个参数options是一个可选参数，是一些可选属性得列表，可设置的选项有三个：enableHigh Accuracy是一个布尔值，表示是否使用高精度的位置信息。Timeout是以毫秒数表示的获取位置信息得超时限制，maximumAge表示对地理位置信息缓存的有效时间，以毫秒表示。

2.2 监视位置信息

watchPosition方法可用于持续获取用户当前的地理位置信息，该信息是周期性自动获取，语法如下所示：

navigator.geolocation.watchPosition（successCallback， errorCallback，options）；

该方法参数的说明和使用与getCurrentPosition方法相同。调用该函数时会返回一个watch ID，可以用于清除此次的监视操作。

2.3 停止获取位置信息

如果不想再更新位置信息，则可以使用clearWatch方法停止监视当前用户地理位置信息，具体方法如下：

navigator.geolocation.clearWatch（watchID）；

参数watchID是调用watchPosition方法监视地理位置信息时的返回参数。

3 构建地理位置应用

首先通过geolocation接口获取到用户的地理位置信息，然后结合百度地图的应用，在地图上显示获取到的用户当前的地理位置信息并进行标注，关键代码如图1，图2所示：

4 结语

Geolocation API封裝了获取位置的技术细节，通过底层设备例如笔记本计算机或手机，可将包含有经度、纬度坐标的位置信息提供给浏览器。借助这些位置信息就可以开发出基于位置信息的高级应用，将虚拟世界和现实世界整合在一起，在当今移动互联网时代显得价值连城。

参考文献

[1]温苑花.基于HTML5技术在移动互联网中的应用研究[J].中国新通信，2017，（23）：29.

[2]毕晓明.简析HTML5在移动互联网开发中的应用[J].软件工程，2016，19（02）：41-42.

[3]梁莉菁.基于Geolocation API的Html5地理位置追踪定位的实现[J].萍乡高等专科学校学报，2014，（06）：97-101.