Transcript Sensor, Gyroscope and Positioning

第16章 感測器、羅盤與定位
 16-1 加速感測器
 16-2 數位羅盤
 16-3 定位服務的基礎
 16-4 取得定位資料
 16-5 應用實例：定位與Google地圖
16-1 加速感測器
 16-1-1 取得加速感測器的位移
 16-1-2 偵測是否搖動行動裝置
16-1-1 取得加速感測器的位移-座標
 加速感測器是一種偵測行動
裝置X、Y和Z軸3D移動的感
測器，可以偵測相對於目前
位置的改變，即位移，讓我
們偵測行動裝置是否有移動
、傾斜或加速。請將行動裝
置平放至桌面，此時X、Y和
Z軸的移動座標，如右圖所
示：
16-1-1 取得加速感測器的位移取得目前加速感測器的位移(方法)
 PhoneGap的Acceleration物件是一個唯讀物件，其
內容是特定時間點取得的加速感測器值，我們可
以使用Accelerometer物件的
getCurrentAcceleration()方法取得目前加速感測器X
、Y和Z軸的位移，如下所示：
navigator.accelerometer.getCurrentAcceleration(onS
uccess, onError);
 程式碼使用navigator物件的accelermeter屬性取得
Accelerometer物件，方法參數是2個回撥函數，成
功執行onSuccess；失敗執行onError。
16-1-1 取得加速感測器的位移取得目前加速感測器的位移(回撥函數)
 成功執行onSuccess回撥函數，使用屬性取得加速感測器X
、Y和Z軸的位移；失敗執行onError，如下所示：
function onSuccess(acceleration) {
var element = document.getElementById('accelerometer');
element.innerHTML = 'X: ' + acceleration.x + '<br/>' +
'Y: ' + acceleration.y + '<br/>' +
'Z: ' + acceleration.z + '<br/>' +
'Timestamp: ' + acceleration.timestamp + '<br/>';
}
function onError() {
alert("錯誤:加速感測器發生錯誤!");
}
16-1-1 取得加速感測器的位移定時監測加速感測器的位移(開始監測)
 我們可以使用watchAcceleration()方法在間隔時間，持續更
新加速感測器的位移，如下所示：
var options = { frequency: 1000 }; // 每秒更新
watchID = navigator.accelerometer.watchAcceleration(
onSuccess, onError, options);
 程式碼的options是AccelerometerOptions物件，其內容是監
測的間隔時間，frequency屬性是毫秒，1000就是1秒，每
當間隔時間到時，成功取得資料就呼叫第1個參數
onSuccess()回撥函數取得X、Y和Z軸的位移，即之前的
onSuccess()函數；失敗呼叫onError()回撥函數，最後1個參
數是AccelerometerOptions物件的間隔頻率。
16-1-1 取得加速感測器的位移定時監測加速感測器的位移(停止監測)
 方法傳回值watchID可以參考定時監測，以便我們
呼叫clearWatch()方法來停止監測，如下所示：
if (watchID) {
navigator.accelerometer.clearWatch(watchID);
watchID = null;
}
 if條件判斷watchID，如果有參考，就呼叫
clearWatch()方法停止監測，參數是watchID。
16-1-1 取得加速感測器的位移定時監測加速感測器的位移(停止監測)
16-1-2 偵測是否搖動行動裝置previousReading物件
 我們可以使用加速感測器偵測使用者是否搖動行動裝置，
首先我們需要建立previousReading物件儲存前一次的偵測
值，如下所示：
var previousReading = {
x: null,
y: null,
z: null
}
 物件的x、y和z屬性儲存Acceleration物件的x、y和z屬性值
。
16-1-2 偵測是否搖動行動裝置-計算變動量
 我們需要改寫定時監測的onSuccess()回撥函數，changes物
件是使用Math.abs()方法計算前一次和目前各軸位移的變
動量，如下所示：
var changes = {};
bound = 0.2;
if (previousReading.x != null) {
changes.x = Math.abs(previousReading.x,acceleration.x);
changes.y = Math.abs(previousReading.y,acceleration.y);
changes.z = Math.abs(previousReading.z,acceleration.z);
}
16-1-2 偵測是否搖動行動裝置-判斷搖動
 使用if條件判斷是否各軸都超過bound變數變動範圍，如果
成立，就顯示使用者搖動行動裝置的訊息文字，如下所示
：
if (changes.x > bound && changes.y > bound && changes.z >
bound) {
alert("行動裝置搖動");
}
previousReading = {
x: acceleration.x,
y: acceleration.y,
z: acceleration.z
}
16-1-2 偵測是否搖動行動裝置-圖例
16-2 數位羅盤-說明
 一般來說，目前的行動
裝置都提供數位羅盤（
Digital Compass）來取得
行動裝置指向哪一個方
向，它是使用2或3個磁
場偵測器提供資料，以
三角運算計算出指向哪
一個方向。
16-2 數位羅盤取得目前指向哪一個方向(方法)
 PhoneGap的CompassHeading物件是一個唯讀物件
，其內容是目前指向哪一個方向的0~359.99角度
值，我們可以使用Compass物件的
getCurrentHeading()方法取得目前數位羅盤所指的
方向，如下所示：
navigator.compass.getCurrentHeading(onSuccess,
onError);
 程式碼使用navigator物件的compass屬性取得
Compass物件，方法參數是2個回撥函數，成功執
行onSuccess；失敗執行onError。
16-2 數位羅盤取得目前指向哪一個方向(回撥函數)
 回撥函數成功執行onSuccess，參數compassHeading物件可以使用
magneticHeading屬性取得方向，使用CSS樣式旋轉<img>標籤的箭頭圖
片來指出方向；失敗執行onError，如下所示：
function onSuccess(heading) {
var arrowOrientation = 360 - heading.magneticHeading;
$('#arrow').css(
'-webkit-transform','rotate(' + arrowOrientation + 'deg)'
);
$('#status').html("目前方位: " + heading.magneticHeading);
}
function onError(compassError) {
alert("數位羅盤錯誤: " + compassError.code);
}
16-2 數位羅盤定時監測指向哪一個方向(開始監測)
 我們可以使用watchHeading()方法在間隔時間，持續監測
指向哪一個方向，如下所示：
var options = { frequency: 500 }; // 每半秒更新
watchID = navigator.compass.watchHeading(
onStartSuccess, onError, options);
 程式碼的options變數是CompassOptions物件，frequency屬
性是監測的間隔時間（毫秒），每當間隔時間到時，成功
取得資料呼叫第1個參數onStartSuccess()回撥函數來取得目
前指向的方向；失敗呼叫onError()回撥函數，最後1個參數
是CompassOptions物件的間隔頻率。
16-2 數位羅盤定時監測指向哪一個方向(停止監測)
 方法傳回值watchID可以參考定時監測，以便我們
呼叫clearWatch()方法來停止監測，如下所示：
if (watchID) {
navigator.compass.clearWatch(watchID);
watchID = null;
}
 if條件判斷watchID，如果有參考，就呼叫
clearWatch()方法停止監測，參數是watchID。
16-2 數位羅盤監測方向更動的角度(開始監測)
 我們也可以監測當方向移動一定角度時，呼叫回
撥函數，使用的是watchHeadingFilter()方法，如下
所示：
var options = { filter: 10 };
watchID = navigator.compass.watchHeadingFilter(
onSuccess, onError, options);
 CompassOptions物件的filter屬性指定更動角度，
以此例是當更動10度後，呼叫onSuccess()回撥函
數。
16-2 數位羅盤監測方向更動的角度(停止監測)
 方法傳回值watchID可以參考角度更動監測，以便
我們呼叫clearWatchFilter()方法來停止監測，如下
所示：
if (watchID) {
navigator.compass.clearWatchFilter(watchID);
watchID = null;
}
 if條件判斷watchID，如果有參考，就呼叫
clearWatchFilter()方法停止監測，參數是watchID。
16-3 定位服務的基礎
 16-3-1 定位方式
 16-3-2 經緯度座標
16-3 定位服務的基礎
 行動裝置結合定位功能和Google地圖可以建立「位置感知
服務」（Location-based Service，LBS），這是一項十分實
用的功能，LBS應用程式可以追蹤你的位置和提供一些額
外服務，例如：找出附近的咖啡廳、停車場、自動櫃員機
或加油站等。
 Google地圖（Google Map）是一套內建Android作業系統的
應用程式，可以顯示指定經緯度座標的詳細地圖。LBS另
一項常見的應用是路徑規劃的導航，除了行車導航外，對
於大型展覽館、購物商場、城市觀光、野生動物園或主題
樂園等，更可以提供導覽服務，結合定位功能來提供使用
者更精確的位置資訊。
16-3-1 定位方式
 一般來說，行動裝置主要提供兩種方式的定位服
務，其說明如下所示：
• GPS定位：使用GPS（Global Positioning System
）的衛星訊號來定位，可以提供精確的位置資
訊，但是無法收到衛星訊號的室內並無法使用
。
• 網路定位；直接使用電信公司基地台執行三角
定位，其提供的位置資訊較不精確，但是可以
在室內使用。
16-3-2 經緯度座標-地理座標系統
 定位服務最主要的目的是找出行動裝置目前位置的經緯度
座標，經緯度是經度（Longitude）與緯度（Latitude）合
稱的座標系統，也稱為地理座標系統，它是使用三度空間
的球面來定義地球表面各點的座標系統，能夠標示地球表
面上的任何一個位置。經度與緯度的說明，如下所示：
• 緯度：地球表面某一點距離地球赤道以南或以北的度數，其值為0
至90度，赤道以北的緯度叫北緯（符號為N）；赤道以南的緯度稱
南緯（符號為S）。
• 經度：地球表面上某一點距離本初子午線（一條南北方向經過倫
敦格林威治天文台舊址的子午線）以東或以西的度數，簡單的說
，本初子午線的經度是0度，其他地點的經度是向東從0到180度，
即東經（符號為W）或向西從0到180度，即西經（符號為E）。
16-3-2 經緯度座標-範例
 在地球儀或地圖上描述經緯度座標是使用度（Degrees）
、分（Minutes）和秒（Seconds），例如：舊金山金門大
橋的經緯度，如下所示：
122o29’W
37o49’N
 上述經緯度是西經122度29分；北緯37度49分，每一度可
以再分成60單位的分，分可以再細分60單位的秒（如果需
要可以在細分下去）。在電腦上表示經緯度通常是使用十
進位方式表示，N和E為正值；S和W為負值，分為小數點
下2位，秒是之後2位，以上述經緯度為例，十進位表示法
的經緯度，如下所示：
-122.29
37.49
16-4 取得定位資料-說明
 PhoneGap提供
Geolocation API幫助我們
存取行動裝置目前GPS
的定位資料，包含：緯
度（Latitude）、經度（
Longitude）和高度（
Altitude）等。
16-4 取得定位資料取得目前的定位資料(方法)
 PhoneGap的Coordinates物件是一個唯讀物件，提供屬性來
取得位置的地理座標（Geographic Coordinates），我們可
以使用Geolocation物件的getCurrentPosition()方法取得行動
裝置目前的位置座標，如下所示：
var options = {
enableHighAccuracy: true,
timeout: 10000
};
navigator.geolocation.getCurrentPosition(onSuccess, onError,
options);
 options是GeolocationOptions物件，其屬性是取得定位資料
時的選項參數。
16-4 取得定位資料取得目前的定位資料(屬性)
 GeolocationOptions物件的屬性是取得定位資料時
的選項參數，相關屬性的說明，如下表所示：
屬性
說明
frequency
取回位置的頻率，單位是毫秒，預設值
10000
enableHighAccuracy
指定應用程式需要取得最佳的定位資料，
true為是
timeout
最長的等待時間，以毫秒為單位
maximumAge
從快取取回不超過此時間的位置資料，單位
是毫秒
16-4 取得定位資料取得目前的定位資料(回撥函數)
 成功執行onSuccess回撥函數，可以使用coords屬性取得
Coordinates物件，此物件的屬性就是位置資料；失敗執行
onError，如下所示：
function onSuccess(position) {
$('#pos').html("緯度: " + 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));
}
16-4 取得定位資料定時監測定位資料(開始監測)
 我們可以使用watchPosition()方法在間隔時間，持續監測
和傳回位置資料，如下所示：
var options = {
enableHighAccuracy: true,
timeout: 10000,
frequency: 2000 // 每2秒更新
};
watchID = navigator.geolocation.watchPosition(
onSuccess, onError, options);
 程式碼的options物件是使用frequency屬性指定監測的間隔
時間（毫秒），每當間隔時間到時，成功取得資料呼叫第
1個參數onSuccess()回撥函數取得目前位置資料；失敗呼叫
onError()回撥函數，最後1個參數選項物件。
16-4 取得定位資料定時監測定位資料(停止監測)
 方法傳回值watchID可以參考定時監測，以便我們
呼叫clearWatch()方法來停止監測，如下所示：
if (watchID) {
navigator.geolocation.clearWatch(watchID);
watchID = null;
}
 if條件判斷watchID，如果有參考，就呼叫
clearWatch()方法停止監測，參數是watchID。
16-5 應用實例：定位與Google地圖-說明
 在說明PhoneGap的
Geolocation API後，我們
可以搭配jQuery UI Map
，在行動裝置顯示目前
座標的Google地圖，和
標記圖片。
16-5 應用實例：定位與Google地圖jQuery UI Map簡介與使用
 jQuery UI Map目前為第3版，它是jQuery和jQuery Mobile的
外掛程式，可以配合Google Map API在網頁顯示指定位置
座標的Google地圖，其官方網址為：
http://code.google.com/p/jquery-ui-map/。
 請在官網下載外掛程式，並且將jquery.ui.map.min.js的
JavaScript程式檔案複製至「\assets\www」目錄，然後就
可以在index.html含括外部程式檔案，如下所示：
<!-- jQuery UI Map v3 -->
<script
src="http://maps.google.com/maps/api/js?sensor=true&la
nguage=zh-tw"></script>
<script src="jquery.ui.map.min.js"></script>
16-5 應用實例：定位與Google地圖顯示Google地圖(指定座標)
 當我們使用PhoneGap的Geolocation API取得目前
行動裝置的位置座標後，就可以在onSuccess()回
撥函數顯示此座標的Google地圖，如下所示：
var lat = position.coords.latitude;
var lng = position.coords.longitude
var mapdata = { destination: new
google.maps.LatLng(lat, lng)};
 程式碼使用Position物件的參數取得經緯度座標後
，建立mapdata的座標物件。
16-5 應用實例：定位與Google地圖顯示Google地圖(繪出Google地圖)
 接著呼叫gmap()方法繪出Google地圖，$(‘#map_canvas’)選
擇id屬性值為map_canvas的<div>標籤，方法參數是一個物
件，center屬性將座標置中顯示，zoom屬性是放大倍率，
disableDefaultUI屬性為ture，表示不顯示預設使用介面，
callback屬性是完成後呼叫的回撥函數，如下所示：
$('#map_canvas').gmap(
{'center' : mapdata.destination,
'zoom' : 12,
'disableDefaultUI':true,
'callback':function() {
…
});
16-5 應用實例：定位與Google地圖在Google地圖加上標記圖片
 在gmap()方法的回撥函數可以加上標記圖片，如下所示：
'callback':function() {
var self = this;
var marker = self.addMarker({ 'position':this.get('map').getCenter() });
marker.click(function() {
self.openInfoWindow({ 'content' : lat + ',' + lng }, this);
});
}
 回撥函數呼叫addMarker()方法加上標記圖片，圖片是位在
Google地圖的中心，即position屬性，marker.click()方法可
以建立按一下標記圖片的事件處理，以此例是呼叫
openInfoWindow()方法顯示一個經緯度座標值的視窗。