某個案子要用手機取得使用者所在經緯度的功能,使用 HTML5 可以很快地達成這個需求,但在較舊的 Android 版本瀏覽器上(例如 HTC Magic 的內建瀏覽器,自行刷機就另當別論了XD)會無法透過 HTML5 的 navigator.geolocation
取得定位。找過資料後,發現在這種情況需要透過 Gears 功能來達成(HTC Magic 的瀏覽器支援 Gears)。
下面就是整合這兩種方法的 Code:
首先,要支援 Gears,要先在 head 標籤引入此 js:
<script type="text/javascript" src="http://code.google.com/apis/gears/gears_init.js"></script>
接著,下面是主要的 JavaScript:
// 瀏覽器支援 HTML5 定位方法
if (navigator.geolocation) {
// HTML5 定位抓取
navigator.geolocation.getCurrentPosition(function (position) {
mapServiceProvider(position.coords.latitude, position.coords.longitude);
},
function(error) {
switch (error.code) {
case error.TIMEOUT:
alert('連線逾時');
break;
case error.POSITION_UNAVAILABLE:
alert('無法取得定位');
break;
case error.PERMISSION_DENIED: // 拒絕
alert('想要參加本活動,\n記得允許手機的GPS定位功能喔!');
break;
case error.UNKNOWN_ERROR:
alert('不明的錯誤,請稍候再試');
break;
}
});
} else { // 不支援 HTML5 定位
// 若支援 Google Gears
if (window.google && google.gears) {
try {
// 嘗試以 Gears 取得定位
var geo = google.gears.factory.create('beta.geolocation');
geo.getCurrentPosition(successCallback, errorCallback, { enableHighAccuracy: true, gearsRequestAddress: true });
} catch (e) {
alert('定位失敗請稍候再試');
}
} else {
alert('想要參加本活動,\n記得允許手機的GPS定位功能喔!');
}
}
// 取得 Gears 定位發生錯誤
function errorCallback(err) {
var msg = 'Error retrieving your location: ' + err.message;
alert(msg);
}
// 成功取得 Gears 定位
function successCallback(p) {
mapServiceProvider(p.latitude, p.longitude);
}
// 顯示經緯度
function mapServiceProvider(latitude, longitude) {
alert('經緯度:' + latitude + ', ' + longitude);
}
以上,如此便能確保在舊版 Android 瀏覽器中也能正確取得定位了。
在 HTC Magic, iPhone 3GS, iPhone 4, Samsung i9000, Samsung i9100 上實測過。
PS.對了,過程中也測過 Google AJAX API 的 IP 定位方式,也就是透過 google.loader.ClientLocation
的方式,但大概是對台灣的 IP 定位資料庫很不準吧,在台北市卻將我定位在台中。因此就沒有採用此方法了。
參考資料:
如何在 Mobile Web App 中取得座標
Google Geolocation API
Gears Geolocation Demo
One thought on “[HTML5] 瀏覽器取得定位筆記”