amaze 绝对位置 html,JS 插件 - Geolocation | Amaze UI
Geolocation
HTML5 Geolocation 封装。
HTML5 API 简介
navigator.geolocation 对象有以下方法：// 获取当前位置
.getCurrentPosition(successCallback, [[errorCallback,]options]);
// 监视位置变化
.watchPosition(successCallback, [[errorCallback,]options]);
// 清除监视
.clearWatch(watchId);
前两个方法的成功回调函数 successCallback 必需。
获取位置成功时处理函数的参数
var successCallback = function(position){
};
获取位置成功时返回一个位置对象，可以在成功回调函数中调用：
{
coords: {
latitude:, // 维度
longitude:: , // 经度
altitude: , // 海拔
accuracy: , // 精确度
altitudeAccuracy: , // 海拔精确度
heading: , // 设备正北顺时针前进的方位
speed: '' // 设备外部环境的移动速度(m/s)
}
timestamp: '' // 获得位置的时间戳
}
发生错误时返回 PositionError 对象
{
code: 2
message: ""
}
// PERMISSION_DENIED = 1;
// POSITION_UNAVAILABLE = 2;
// TIMEOUT = 3;
选项enableHighAccuracy: 是否启用高精度，Boolean，默认为 false，开启以后响应时间会变长，在移动设备上会消耗更多流量；
timeout: 响应超时时间(毫秒)，默认为 0，即不限制时长；
maximumAge: 缓存时间(毫秒)，默认为 0，即不混存，每次都重新获取。
Amaze UI 封装的 Geolocation
通过 jQuery.AMUI.Geolocation 可以访问 Amaze UI 封装的 Geolocation 构造函数：
var geo = new jQuery.AMUI.Geolocation();
可以将上述 enableHighAccuracy、timeout、maximumAge 三个选项传递给构造函数。
var geo = new jQuery.AMUI.Geolocation({
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 60000
});
Geolocation 实例有三个方法：.get(options)：对应原生 API 的 getCurrentPosition() 方法；
options 选项同上，这里设置的选项会覆盖该实例的选项；
var geo = new jQuery.AMUI.Geolocation({
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 60000
});
geo.get().then(function(position){
// 成功回调，position 为返回的位置对象
}, function(err){
// 不支持或者发生错误时回调，err 为错误提示信息
});
.watch(options)：对应原生 API 的 getCurrentPosition() 方法；
options 除三个选项以外，还必须通过 options.done 设置成功时的回调函数(失败回调 options.fail 可选)；
返回 watchID；
出于电量、流量消耗等考虑，不建议在移动设备上使用此方法。
var geo = new jQuery.AMUI.Geolocation({
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 60000
});
geo.watch({
done: function(position){
// 成功回调，position 为返回的位置对象
},
fail: function(err){
// 不支持或者发生错误时回调，err 为错误提示信息
}
});
.clearWatch()：清除当前实例的 watchID。
使用示例
使用 Mac 的用户请使用 Safari 浏览器查看，其他浏览器可能由于安全性和隐私设置无法使用定位服务。
获取当前位置并在百度地图上显示
$(function(){
var geolocation = new $.AMUI.Geolocation();
var $demoArea = $('#doc-geo-demo');
geolocation.get({timeout: 7000}).then(function(position){
// console.log(position.coords);
var contentString = '你的位置：\n\t纬度 ' + position.coords.latitude +
'，\n\t经度 ' + position.coords.longitude + '，\n\t精确度 ' +
position.coords.accuracy;
var map = new BMap.Map('doc-geo-demo');
var point = new BMap.Point(position.coords.longitude, position.coords.latitude);
map.centerAndZoom(point, 15);
map.addControl(new BMap.MapTypeControl());
map.enableScrollWheelZoom(true);
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
map.panTo(point);
marker.addEventListener('click', function(){
alert(contentString); // 点击点弹出信息
});
}, function(err){
$demoArea.html('获取地理位置时发生错误，错误信息：
' + err);
console.log(err);
});
});
监视位置变化
开始监视位置 清除监视
$(function(){
var geolocation = new $.AMUI.Geolocation();
var $watch = $('#doc-geo-watch');
var $clear = $('#doc-geo-clear');
$watch.on('click', function(){
alert('开始监控，请打开控制台查看。');
geolocation.watch({
done: function(position){
console.log('watchID: ' + geolocation.watchID);
console.log('你的位置：\n\t纬度 ' + position.coords.latitude +
'，\n\t经度 ' + position.coords.longitude);
},
fail: function(error){
console.log(error);
}
});
});
$clear.on('click', function(){
geolocation.clearWatch();
console.log('watchID: ' + geolocation.watchID);
});
});
参考链接