`
lixinlixin2008
  • 浏览: 154216 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

如何在 Mobile Web App 中取得经纬度(转)

阅读更多
转载自ericsk ,地址如下:http://blog.ericsk.org/archives/1347/comment-page-1


以下为转载内容:

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

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

iPhone 3.0 之後,iPhone Safari 直接支援 Geolocation API,所以你可以利用下面這段 JavaScript 程式碼來取得該 iPhone 的經緯度座標資料:

var getPosition = function(pos) {
    // pos.coords.latitude 及 pos.coords.longitude 即為座標資料
};
var errorCallback = function(error) {
    // 定位失敗,可能是無法定位或是使用者關閉手機的定位服務
};
navigator.geolocation.getCurrentPosition(getPosition,
    errorCallback, {enableHighAccuracy: true});


Android-based

在目前 Android-based 的手機上,瀏覽器還不直接支援 Geolocation API,但是 Android-based 手機的瀏覽器都預先安裝好了 Google Gears,所以也可以透過 Google Gears 所提供的 Geolocation API 來取得座標資料:

// 先載入 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
    }
}


呼叫的方式與原生支援的 Geolocation API 一模一樣。
加入 IP-based Geolocation 支援

如果利用原生的 Geolocation API 或是 Google Gears 取得座標資料失敗時,其實還可以再使用 IP 作定位的動作,這時可以利用 Google AJAX API Loader 來作:

// 先載入 http://www.google.com/jsapi 取得 google ajax api loader
...
if (google.loader.ClientLocation) {
    // google.loader.ClientLocation.latitude
    // google.loader.ClientLocation.longitude
}

全部放在一起

最後,如果要把這些 code 全部放在一起,那就有可能會是這樣:

// 先載入:
// 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();
    }
}


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

相关推荐

    mobile-photo-app:网页设计师 PhoneGap 构建教程 - 第 212 期

    在“mobile-photo-app”项目中,我们关注的核心是相机功能。通过调用 PhoneGap 的 Camera API,我们可以方便地在应用内拍摄或选择照片,并进行后续处理。 在创建这个应用时,你需要先了解 HTML5 的 `...

    backpackers-mobile

    在找到背包客API API 密钥验证城市搜索数据库系统要求Node.jsCordova $ sudo npm install -g cordova 离子 $ sudo npm install -g 离子屏幕appAbout.html 状态:app.about 控制器: 应用城市信息.html 状态:app....

    mobile_h2h

    8. **Mobile App Performance优化**: 在移动设备上,JavaScript性能优化尤为重要。包括但不限于减少网络请求、压缩资源、优化图片、使用懒加载、合理管理内存等策略,都能提升用户体验。 以上就是关于JavaScript在...

    multi-media-js:跨平台媒体JavaScript API

    经过初步的验证,发现 Web 浏览器、Android App 均能较好地支持 H5 原生能力(原生获取经纬度、原生拍照、原生录音),而且微信公众号、Android 平台还自己单独封装了一套 API 来实现这些能力; 综合考虑,使用 H5 ...

    whatwebcando:设备集成HTML5 API概述

    12. **Web App Manifest**:定义了应用的元数据,如应用名称、图标、启动屏幕显示等,使得网页应用能像原生应用一样安装和管理。 13. **Web Share API**:允许用户方便地分享内容到社交网络或其他应用程序,简化了...

Global site tag (gtag.js) - Google Analytics