转载自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 的 Camera API,我们可以方便地在应用内拍摄或选择照片,并进行后续处理。 在创建这个应用时,你需要先了解 HTML5 的 `...
在找到背包客API API 密钥验证城市搜索数据库系统要求Node.jsCordova $ sudo npm install -g cordova 离子 $ sudo npm install -g 离子屏幕appAbout.html 状态:app.about 控制器: 应用城市信息.html 状态:app....
8. **Mobile App Performance优化**: 在移动设备上,JavaScript性能优化尤为重要。包括但不限于减少网络请求、压缩资源、优化图片、使用懒加载、合理管理内存等策略,都能提升用户体验。 以上就是关于JavaScript在...
经过初步的验证,发现 Web 浏览器、Android App 均能较好地支持 H5 原生能力(原生获取经纬度、原生拍照、原生录音),而且微信公众号、Android 平台还自己单独封装了一套 API 来实现这些能力; 综合考虑,使用 H5 ...
12. **Web App Manifest**:定义了应用的元数据,如应用名称、图标、启动屏幕显示等,使得网页应用能像原生应用一样安装和管理。 13. **Web Share API**:允许用户方便地分享内容到社交网络或其他应用程序,简化了...