HTML5地理定位(使用实例)

整    理:曹燕

时    间:2015-10-22

说    明:html5地理定位的使用实例

 

1.功能描述

程序包括一个html文件和一个php文件。

实现的功能是:①在定位成功的情况下,显示用户所在位置的经纬度、用户所在地点;当用户点击“查看周围店铺”时,在地图上显示周围的店铺以及从用户所在点到达店铺的路线。②在定位失败(包括用户拒绝定位等)的情况下,显示用户所在的省市。

 

2.前端html文件说明

2.1 getLocation()方法

功能:该方法在文档加载时执行,功能是获取定位

说明:若浏览器支持地理定位,则利用html5中提供的定位api进行定位;否则调用ip定位的方法。HTML5地理定位(使用实例)255

2.2 onSuccess(position)方法

功能: 该方法是定位成功时执行的回调函数,功能是获取并显示用户所在位置的经纬度、显示用户所在地点。

说明:①利用h5地理定位获取当前所在地点的经度和纬度;②将经度和纬度传给后台,通过ajax向后台请求获得位置信息,包括转换之后的百度标准经纬度、用户所在地点的详细信息。HTML5地理定位(使用实例)419

2.3 onError(error)方法

功能:该方法是定位失败时执行的回调函数,功能是调用ip定位的方法。HTML5地理定位(使用实例)477

2.4 ipLocate()方法

功能:该方法是在浏览器不支持地理定位或者地理定位失败时调用的函数,功能是显示用户所在位置的省市信息。

说明:通过ajax向后台请求获得位置信息,传给后台的经纬度是(400,400)这组无效数据,以表示经纬度获取失败HTML5地理定位(使用实例)605

2.5 showStores()方法

功能:该方法在用户点击“显示周围店铺”按钮时执行,功能是在百度地图上显示从用户位置到周围店铺之间的路线。

说明:此方法的顺利执行需要在html文件头部引入百度地图api

<script src="http://api.map.baidu.com/api?v=2.0&ak=gS3IRPx5CG3SUixVgIUbUi2c"

type="text/javascript"></script>HTML5地理定位(使用实例)823

 

3.后台php文件说明(待补充)

 

代码下载20151019locate

相关文档:HTML5地理定位(使用实例)

HTML5地理定位(原理知识)

整    理:曹燕

时    间:2015-10-22

说    明:html5地理定位的原理知识

1.地理定位的作用

2.地理定位的原理

3.地理定位的机制

4.浏览器支持情况

    4.1 PC浏览器支持情况

    4.2 手机支持情况

5.使用API前检测浏览器

6.API的使用

    6.1 getCurrentPosition()方法

    6.2 watchPosition()方法

    6.3 clearWatch()方法

7.代码示例

8.扩展

1.地理定位的作用

HTML5地理定位(HTML5 Geolocation)提供了一组API用于获取用户的地理位置。鉴于该特性可能侵犯用户的隐私,在访问位置信息前,浏览器都会询问用户是否共享其位置信息。

 

2.地理定位的原理

Geolocation的位置信息主要来源于以下四种方式:

①GPS全球定位。在露天环境下效果较好,获取位置信息非常精确。适合移动设备。

②IP地址定位。适用于接入互联网的设备,比如台式机。但是因为浏览器是将位置信息发送给 ISP 服务商来解析,其IP 地址与服务商所在位置有关,可能与用户所在位置不同,所以这种方式的解析容易出现偏差。

③WiFi定位。这种方式与GPS效果同样精确,它通过多个WiFi接入点三角距离获取位置信息数据。适用于室内环境的移动设备。

④GMS网络定位。与TCP/IP协议不同,它基于GMS数据交换协议。通常用于移动服务商的GPRS数据服务。解析方式精确。

 

3.地理定位的机制HTML5地理定位(原理知识)1339

4.浏览器支持情况

4.1 PC浏览器支持情况:

Firefox 3.5+
Chrome 5.0+
Safari 5.0+
Opera 10.60+
Internet Explorer 9.0+

4.2 手机支持情况:

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

 

5.使用API前检测浏览器

在使用地理位置API之前首先要检测浏览器是否支持:HTML5地理定位(原理知识)1604

 

6.API的使用

navigator.geolocation对象有三个方法:HTML5地理定位(原理知识)1646

6.1 getCurrentPosition()方法

功能:获取用户当前位置

参数:

①successCallback是定位成功时执行的回调函数,是必须参数;

successCallback返回一个地理数据对象position作为参数,该对象的属性有:

属性名 描述
coords.latitude 十进制数的纬度
coords.longitude 十进制数的经度
coords.accuracy 位置精度
coords.altitude 海拔,海平面以上以米计
coords.altitudeAccuracy 位置的海拔精度
coords.heading 方向,从正北开始以度计
coords.speed 速度,以米/每秒计
timestamp 响应的日期/时间

 

②errorCallback定位失败时执行的回调函数,是可选参数;

errorCallback返回一个错误数据对象error作为参数,该对象的属性有:

属性名 取值 描述
code PERMISSION_DENIED (数值为1)  表示没有权限使用地理定位API
POSITION_UNAVAILABLE (数值为2) 表示无法确定设备的位置
TIMEOUT (数值为3) 表示超时
UNKNOWN_ERROR(数值为4) 表示未知错误

 

③options参数为额外参数,用来实现更精细的执行定位,是可选参数。

options = {     
    enableHighAccuracy:true,
    timeout:1000,      
    maximumAge:3000
}

enableHighAccuracy表示是否要求高精度的地理信息,默认为false。

timeout表示等待响应的最大时间,单位是ms,默认是0,表示无穷大。

maximumAge表示应用程序的缓存时间,当第二次请求定位与第一次定位的时间差超过maximumAge,则重新获取一个定位;否则返回缓存中的位置。

6.2 watchPosition()方法

功能:持续获取当前用户位置(定期轮询设备的位置)

参数:该方法的参数和getCurrentPosition()方法的参数是一样的,包括:successCallback(必须)、errorCallback(可选)、options(可选)

返回值:数值型的watchId

 

6.3 clearWatch()方法

功能:配合watchPosition()使用,用于停止watchPosition()的轮询

参数:watchPosition()方法的返回值watchId

 

7.代码示例HTML5地理定位(原理知识)2858

效果(显示当前所在位置的经度和纬度):HTML5地理定位(原理知识)2880

 

8.扩展

在获取用户位置时除了以数值的形式显示出来,还可以结合百度或谷歌地图的API,这样可以在地图上显示位置。

首先引入百度地图API:HTML5地理定位(原理知识)2953

然后改写上面代码示例中的onSuccess方法(定位成功时执行的回调函数)HTML5地理定位(原理知识)2993

这样就能将当前位置显示在地图上:HTML5地理定位(原理知识)3012

附:百度地图开放平台:

http://developer.baidu.com/map/jsdemo.htm#a1_2

 

相关文章:HTML5地理定位(使用实例)