html5中watchPosition,解析HTML5 geolocation的实例教程

测试demo的github地址: github.com/lily1010/html5_geolocation

HTML5 Geolocation API 用于获得用户的地理位置。鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。

一 基于浏览器的HTML5查找地理位置

html5中的GPS定位功能封装在 navigator.geolocation 属性里,有三种方法:

(1) getCurrentPosition 只获取一次用户的位置

(2) watchPosition 返回用户的当前位置，并继续返回用户移动时的更新位置(就像汽车上的 GPS)。

(3) clearWatch() - 停止 watchPosition() 方法

二 getCurrentPosition和 watchPosition方法使用格式是

getCurrentPosition(successCallback,errorCallback,positionOptions)和watchPosition(successCallback,errorCallback,positionOptions)

(1)successCallback表示调用函数成功以后的回调函数，该函数带有一个参数，对象字面量格式，表示获取到的用户位置数据。

(2)errorCallback表示返回的错误代码。它包含以下两个属性：1、message：错误信息

2、 code：错误代码。

其中code错误代码包括以下四个值：

1 位置服务被拒绝

2 暂时获取不到位置信息

3 获取信息超时

4 未知错误

(3)positionOptions数据格式为JSON，有三个可选的属性：1、enableHighAcuracy — 布尔值： 表示是否启用高精确度模式，如果启用这种模式，浏览器在获取位置信息时可能需要耗费更多的时间。

2、timeout — 整数： 表示浏览需要在指定的时间内获取位置信息，否则触发errorCallback。

3、maximumAge — 整数/常量： 表示浏览器重新获取位置信息的时间间隔。

下面来看一下测试例子:(注意要开启定位后才可以看效果)

基于浏览器的HTML5查找地理位置

var options={

enableHighAccuracy:true, //高精度定位参数

maximumAge:1000

}

function getLocation(){

if(navigator.geolocation){

//浏览器支持geolocation

navigator.geolocation.getCurrentPosition(onSuccess,onError,options); //getCurrentPosition 只获取一次用户的地理位置函数

//onSuccess成功返回的回调函数(必选),onError失败返回的回调函数(可选),设置精确度等参数(可选options)

//navigator.geolocation.watchPosition(onSuccess,onError,options); //watchPosition 继续获取用户的位置,适合于导航

//onSuccess成功返回的回调函数(必选),onError失败返回的回调函数(可选),设置精确度等参数(可选options)

}else{

//浏览器不支持geolocation

alert ('您的浏览器暂不支持定位');

}

}

//成功时

function onSuccess(position){

//返回用户位置

//经度

var longitude =position.coords.longitude;

//纬度

var latitude = position.coords.latitude;

//精确度

var accuracy = position.coords.accuracy;

//高度精确度

var altitudeAccuracy = position.coords.altitudeAccuracy;

//设备正北顺时针前进的方位

var heading = position.coords.heading;

//设备外部环境的移动速度(m/s)

var speed = position.coords.speed;

//当位置捕获到时的时间戳

var timestamp = position.timestamp;

document.getElementById("container").innerHTML= "您的经度是=" longitude '
'

"您的纬度是=" latitude '
' "您的精确度是=" accuracy '
'

"您的高度精确度是=" altitudeAccuracy '
' "您的设备正北顺时针前进的方位是=" heading '
'

"您的设备外部环境的移动速度(m/s)是=" speed '
' "您的当位置捕获到时的时间戳是=" timestamp '
';

}

//失败时

function onError(error){

switch(error.code){

case 1:alert("位置服务被拒绝");break;

case 2:alert("暂时获取不到位置信息");break;

case 3:alert("获取信息超时");break;

case 4:alert("未知错误");break;

}

}

window.οnlοad=getLocation;

上面代码最好用手机测试,因为谷歌浏览器因为被国内封的缘故,定位嘛,你们懂得

二 HTML5 geolocation调用百度地图api

百度地图的手册地址: developer.baidu.com/map/jsdemo-mobile.htm#i7_1

事先说明,html5不是精确定位,所以在地图上查看效果时总有几百米的误差

基于浏览器的HTML5查找地理位置和调取百度地图api

var options={

enableHighAccuracy:true, //高精度定位参数

maximumAge:1000

}

function getLocation(){

if(navigator.geolocation){

//浏览器支持geolocation

navigator.geolocation.getCurrentPosition(onSuccess,onError,options); //getCurrentPosition 只获取一次用户的地理位置函数

//onSuccess成功返回的回调函数(必选),onError失败返回的回调函数(可选),设置精确度等参数(可选options)

//navigator.geolocation.watchPosition(onSuccess,onError,options); //watchPosition 继续获取用户的位置,适合于导航

//onSuccess成功返回的回调函数(必选),onError失败返回的回调函数(可选),设置精确度等参数(可选options)

}else{

//浏览器不支持geolocation

alert ('您的浏览器暂不支持定位');

}

}

//成功时

function onSuccess(position){

//返回用户位置

//经度

var longitude =position.coords.longitude;

//纬度

var latitude = position.coords.latitude;

//使用百度地图API

//创建地图实例

var map =new BMap.Map("container");

//创建一个坐标

var point =new BMap.Point(longitude,latitude);

//地图初始化，设置中心点坐标和地图级别

map.centerAndZoom(point,15);

map.addOverlay(new BMap.Marker(point)); //在地图上你的位置显示红色点点

}

//失败时

function onError(error){

switch(error.code){

case 1:alert("位置服务被拒绝");break;

case 2:alert("暂时获取不到位置信息");break;

case 3:alert("获取信息超时");break;

case 4:alert("未知错误");break;

}

}

window.οnlοad=getLocation;

上面代码已经在手机上测试通过了,误差有点大,还是不适合精确定位,定位到城市还是不错的

【相关推荐】

1. 免费h5在线视频教程

2. HTML5-Geolocation APIs的示例代码

3. html5 navigator.geolocation基于浏览器获取地理位置代码案例

4. html5指南(4)-使用Geolocation的详解

5. 详解Html5 Geolocation获取地理位置信息的示例代码分享

6. HTML5的Geolocation地理位置定位API使用方法详解

7. HTML5地理位置定位Geolocation-API及Haversine地理空间距离算法(图文)