[HTML5] 瀏覽器取得定位筆記

Standard

某個案子要用手機取得使用者所在經緯度的功能,使用 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] 瀏覽器取得定位筆記

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *