1. PhoneGap Geolocation对象介绍
2. geolocation.getCurrentPosition
3. 主要对象描述
4. 获取地理位置信息
5. 动态获取地理位置信息
6. 综合案例说明
一、 PhoneGap Geolocation对象介绍
使应用程序可以访问地理位置信息。geolocation对象提供了对设备GPS传感器的访问。Geolocation
提供设备的位置信息,例如经度和纬度。位置信息的常见来源包括全球定位系统(GPS),以及通过诸如IP
地址、RFID、WiFi和蓝牙的MAC地址、和GSM/CDMA手机ID的网络信号所做的推断。不能保证该API返
回的是设备的真实位置信息。这个API是基于W3C Geo location API Specification实现的。有些设备已经提供
了对该规范的实现,对于这些设备采用内置实现而非使用PhoneGap的实现。对于没有地理位置支持的设
备,PhoneGap提供了统一的支持。
方法
geolocation.getCurrentPosition
geolocation.watchPosition
geolocation.clearWatch
参数
geolocationSuccess
geolocationError
geolocationOptions
二、 geolocation.getCurrentPosition
返回设备的当前位置,一个位置对象。
navigator.geolocation.getCurrentPosition(geolocationSuccess,
[geolocationError],
[geolocationOptions]);
参数
geolocationSuccess:通过当前位置的回调。
geolocationError:(可选)如果发生错误,执行的回调。
geolocationOptions:(可选)获取地理位置的选项,例如获取频率。它一般作为一个JSON对象,目前可设
置的属性如下
geolocationOptions{
enableHighAccuracy:提供一个表明应用程序希望获得最佳可能结果的提示。
timeout:允许的以毫秒为单位的最大时间间隔,该时间间隔是从geolocation.getCurrentPosition或
geolocation.watchPosition的调用到相应的geolocationSuccess回调函数被调用,单位是毫秒。
maximumAge:保留上次缓存的最长时间,单位是毫秒。可以理解为获取地理位置信息的频率
注意:
除非enableHighAccuracy选项被设定为true,否则Android 2.X模拟器不会返回一个地理位置结果
例如:{ maximumAge: 3000, timeout: 5000, enableHighAccuracy: true };
}
三、 主要对象描述
1.Position
包含由geolocation API创建的Position坐标信息。
coords:一系列地理坐标。(Coordinates类型)
timestamp:以毫秒为单位的coords的创建时间戳。
2.PositionError
当发生错误时,一个PositionError对象会传递给geolocationError回调函数。
code:一个在下面常量列表中定义的错误代码。
message:说明错误细节的错误信息。
PositionError.PERMISSION_DENIED:权限被拒绝
PositionError.POSITION_UNAVAILABLE:位置不可用
PositionError.TIMEOUT:超时
3. Coordinates
一系列用来描述位置的地理坐标信息的属性。
latitude:以十进制表示的纬度。
longitude:以十进制表示的经度。
altitude:位置相对于椭圆球面的高度,单位为米。 海拔高度
accuracy:以米为单位的纬度和经度坐标的精度水平。altitudeAccuracy:以米为单位的高度坐标的精度水平。
heading:运动的方向,通过相对正北做顺时针旋转的角度指定。speed:以米/秒为单位的设备当前地面速
度。
注意:
altitudeAccuracy: Android设备上不支持该属性,返回值总是null
四、获取地理位置信息
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Geolocation例子</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// 等待PhoneGap加载
document.addEventListener("deviceready", onDeviceReady, false);
// 加载完成
function onDeviceReady() {
navigator.geolocation.getCurrentPosition(onSuccess, onError);
}
// onSuccess回调函数
// 接收包含当前地理位置坐标信息的Position对象
function onSuccess(position) {
var element = document.getElementById('geolocation');
element.innerHTML = '纬度: ' + position.coords.latitude + '<br />' +
'经度: ' + position.coords.longitude + '<br />' +
'海拔高度: ' + position.coords.altitude + '<br />'
+
'精确度: ' + position.coords.accuracy + '<br />' +
'海拔高度精确度: ' + position.coords.altitudeAccuracy + '<br />' +
'运动方向: ' + position.coords.heading + '<br
/>' +
'速度: ' + position.coords.speed + '<br />'
+
'时间戳: ' + new Date(position.timestamp) + '<br />';
}
// onError回调函数,接收包含具体错误信息的PositionError对象
function onError(error) {
alert('错误代码: ' + error.code + '\n' +
'详细信息: ' + error.message + '\n');
}
</script>
</head>
<body>
<p id="geolocation">定位中。。。</p>
</body>
</html>
五、 动态获取地理位置信息
1. geolocation.watchPosition定期获取设备的地理位置信息
navigator.geolocation.watchPosition(onSuccess, onError, options);
2. navigator.geolocation.clearWatch停止定期获取设备的地理位置信息
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Geolocation例子</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
//等待PhoneGap加载
document.addEventListener("deviceready", onDeviceReady, false);
varwatchID = null;
//加载完成
function onDeviceReady() {
// update every 3 seconds
var options = { frequency: 3000 };
watchID = navigator.geolocation.watchPosition(onSuccess, onError, options);
}
// onSuccess回调函数
// 接收包含当前地理位置坐标信息的Position对象
function onSuccess(position) {
var element = document.getElementById('geolocation');
element.innerHTML = '纬度: ' + position.coords.latitude + '<br />' +
'经度: ' + position.coords.longitude + '<br />' +
'<hr />' + element.innerHTML;
}
//取消获取地理位置信息
function clearWatch() {
if (watchID != null) {
navigator.geolocation.clearWatch(watchID);
watchID = null;
}
}
// onError回调函数,接收包含具体错误信息的PositionError对象
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
</script>
</head>
<body>
<p id="geolocation">监测地理位置信息中。。。</p>
<button"clearWatch();">取消监测地理位置信息</button>
</body>
</html>
六、 综合案例
在实际的开发中我们如何实现定位呢?
一般结合百度地图api或者谷歌的地图api实现
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
</style>
<script type="text/javascript"
src="http://api.map.baidu.com/api?v=2.0&ak=5a21b9801cac081f6473bafdc558c53a"></script>
<title>反地址解析</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.331398,39.897445);
map.centerAndZoom(point,12);
var gc = new BMap.Geocoder();
map.addEventListener("click", function(e){
var pt = e.point;
gc.getLocation(pt, function(rs){
var addComp = rs.addressComponents;
alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " +
addComp.streetNumber);
});
});
</script>