如何在 Mobile Web App 中取得座標

本篇文章提及的方法僅適用於 iPhone 3.0+ 及 Android-based 手機。

在寫 mobile web app 時,如果使用者是用 iPhone 3.0+ 或是 Android-based 手機來瀏覽網站時,其實還是有辦法取得手機的經緯度座標資料。以下先分別講述兩支手機各別的方法,然後再將兩個方法合成同一份 JavaScript 程式碼。

iPhone

iPhone 3.0 之後,iPhone Safari 直接支援 Geolocation API,所以你可以利用下面這段 JavaScript 程式碼來取得該 iPhone 的經緯度座標資料:
[code lang="javascript"]
var getPosition = function(pos) {
// pos.coords.latitude 及 pos.coords.longitude 即為座標資料
};
var errorCallback = function(error) {
// 定位失敗,可能是無法定位或是使用者關閉手機的定位服務
};
navigator.geolocation.getCurrentPosition(getPosition,
errorCallback, {enableHighAccuracy: true});
[/code]

Android-based

在目前 Android-based 的手機上,瀏覽器還不直接支援 Geolocation API,但是 Android-based 手機的瀏覽器都預先安裝好了 Google Gears,所以也可以透過 Google Gears 所提供的 Geolocation API 來取得座標資料:
[code lang="javascript"]
// 先載入 Google Gears JS lib:
// http://code.google.com/apis/gears/gears_init.js

....
if (window.google && google.gears) {
try {
var geo = google.gears.factory.create('beta.location');
geo.getCurrentPosition(getPosition,
errorCallback, {enableHighAccuracy: true});
} catch (e) {
// error
}
}
[/code]
呼叫的方式與原生支援的 Geolocation API 一模一樣。

加入 IP-based Geolocation 支援

如果利用原生的 Geolocation API 或是 Google Gears 取得座標資料失敗時,其實還可以再使用 IP 作定位的動作,這時可以利用 Google AJAX API Loader 來作:
[code lang="javascript"]
// 先載入 http://www.google.com/jsapi 取得 google ajax api loader
...
if (google.loader.ClientLocation) {
// google.loader.ClientLocation.latitude
// google.loader.ClientLocation.longitude
}
[/code]

全部放在一起

最後,如果要把這些 code 全部放在一起,那就有可能會是這樣:
[code lang="javascript"]
// 先載入:
// http://www.google.com/jsapi?key=去申請
// 還有 http://code.google.com/apis/gears/gears_init.js
....
....
var getPosition = function(pos) {
// pos.coords.latitude 及 pos.coords.longitude 即為座標資料
};
var errorCallback = function(error) {
fallbackToIPGeoLocation();
};
var fallbackToIPGeoLocation = function() {
if (google.loader.ClientLocation) {
// google.loader.ClientLocation.latitude
// google.loader.ClientLocation.longitude
} else {
// 投降了,真的無法定位
}
};
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(getPosition,
errorCallback, {enableHighAccuracy: true});
} else {
if (window.google && google.gears) {
try {
var geo = google.gears.factory.create('beta.location');
geo.getCurrentPosition(getPosition,
errorCallback, {enableHighAccuracy: true});
} catch (e) {
fallbackToIPGeoLocation();
}
} else {
fallbackToIPGeoLocation();
}
}
[/code]

如此一來便能在 mobile web app 中取得手機的經緯度座標資料了!