<!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>
HTML5+ 手機端獲取設備當前地理位置 geolocation
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。