HTML5+ 手机端获取设备当前地理位置 geolocation
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>WebApp启动页</title>
<script type="text/javascript" src="../js/jQuery.js"></script>
<style type="text/css">
body{
width: 100%;
padding: 0;
margin: 0;
}
input{
padding: .2rem;
margin: .5rem auto 0 auto;
font-size: .5rem;
border-radius: .5rem;
display: block;
width: 5rem;
color: red;
background: white;
}
#Text{
line-height: .6rem;
font-size: .35rem;
color: red;
padding: .3rem;
text-align: center;
}
</style>
</head>
<body>
<input type="button" value="当前位置" id="GetCurrentPosition" />
<input type="button" value="监听位置" id="WatchPosition" />
<input type="button" value="停止监听" id="ClearWatch" />
<input type="button" value="返回首页" id="ReturnIndex" />
<div id="Text"></div>
</body>
</html>
<script type="text/javascript">
/**
* 页面布局rem重置语句
*/
$('html').css("font-size", $(window).width()/10);
/**
* 手机端页面初始化事件, 所有操作均要写在在该事件内
* 否则可能会出现错误: plus is not defind
*/
document.addEventListener('plusready', function(){
/**
* 返回首页的事件
*/
$('#ReturnIndex').on('touchstart', function(){
location.href = 'Index.html';
});
/**
* 获取设备当前位置
* plus.geolocation.getCurrentPosition( A(), B(), option )
* A(postion): 获取成功的回调函数, 参数详情看对象注解(1)
* B(error): 获取失败的回调函数
* option: PositionOptions对象, 详情请看对象注解(2)
*/
/**
* 对象注解(1) -> postion
* 属性：
* coords: (Coordinates 类型 )地理坐标信息，包括经纬度、海拔、速度等信息
* {
* latitude: (Number 类型 )坐标纬度值,
* longitude: (Number 类型 )坐标经度值,
* altitude: (Number 类型 )海拔信息
* accuracy: (Number 类型 )地理坐标信息的精确度信息
* altitudeAccuracy: (Number 类型 )海拔的精确度信息
* heading: (Number 类型 )表示设备移动的方向
* speed: (Number 类型 )表示设备移动的速度
* }
* coordsType: (String 类型 )获取到地理坐标信息的坐标系类型,
* 取值:“gps”：表示WGS-84坐标系； “gcj02”：表示国测局经纬度坐标系； “bd09”：表示百度墨卡托坐标系； “bd09ll”：表示百度经纬度坐标系
* timestamp: (Number 类型 )获取到地理坐标的时间戳信息
* address: (Address 类型 )获取到地理位置对应的地址信息, 可以通过设置PositionOptions参数的geocode属性值为false避免获取地址信息
* addresses: (String 类型 )获取完整地址描述信息
*/
/**
* 对象注解(2) -> PositionOptions
* enableHighAccuracy: (Boolean 类型 )是否高精确度获取位置信息
* timeout: (Number 类型毫秒 )获取位置信息的超时时间
* maximumAge: (Number 类型毫秒 )获取位置信息的间隔时间 默认 5000 不是很准
* provider: (String 类型 )优先使用的定位模块
* 取值: "system":系统定位, "baidu":百度定位, "amap":高德定位, 默认 amap>baidu>system
* coordsType: (String 类型 )指定获取的定位数据坐标系类型, wgs84, gcj02, bd09, bd09ll
* geocode: (Boolean 类型 )是否解析地址信息, 默认为 true
*/
$('#GetCurrentPosition').on('touchstart', function(){
plus.geolocation.getCurrentPosition( function(postion){
$('#Text').append('经纬度: ' + postion.coords.longitude + '---' + postion.coords.latitude + "<br />");
$('#Text').append('当前地址: ' + postion.addresses + "<br />");
}, function(error){
$('#Text').append(error.code + ": " + error.message);
});
});
/**
* 监听设备位置变化信息: plus.geolocation.watchPosition(A(), B(), option)
* 参数与 getCurrentPosition() 相同
*/
var watchId = 0;
$('#WatchPosition').on('touchstart', function(){
watchId = plus.geolocation.watchPosition( function(postion){
$('#Text').append('经纬度: ' + postion.coords.longitude + '---' + postion.coords.latitude + "<br />");
$('#Text').append('当前地址: ' + postion.addresses + "<br />");
}, function(error){
$('#Text').append(error.code + ": " + error.message);
}, {
maximumAge: 5000
});
});
/**
* 关闭监听设备位置信息: plus.geolocation.clearWatch( watchId )
* watchId: 调用watchPosition方法的返回值
*/
$('#ClearWatch').on('touchstart', function(){
plus.geolocation.clearWatch(watchId);
});
});
</script>
