转载自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 中取得手機的經緯度座標資料了!
分享到:
相关推荐
本篇将详细讲解如何利用C#在Windows Mobile中获取GPS经纬度信息。 首先,我们需要了解Windows Mobile的定位服务主要依赖于位置感知API(Location API),它为开发者提供了获取地理位置数据的接口。在C#中,我们可以...
在当前的互联网环境中,Web App已经成为移动设备上不可或缺的应用形式。jQuery Mobile,作为一款强大的前端框架,为开发者提供了简单、高效的手段来创建响应式、触摸友好的Web App。本文将深入探讨如何利用jQuery ...
With this hands-on book, veteran mobile and web developer Maximiliano Firtman demonstrates which aspects of your site or app slow down the user’s experience, and what you can do to achieve lightning...
本章节将从以下几个方面对互动设计在Mobile APP中的应用进行详细介绍: - **互动设计的概念与重要性** - **Mobile APP的设计原则** - **互动设计案例分析** #### 二、勤崴国际与互动设计的成功案例 勤崴国际作为...
Mobile App Development with Ionic 2: Cross-Platform Apps with Ionic, Angular, and Cordova by Chris Griffith English | 10 Apr. 2017 | ASIN: B06Y5Q24B2 | 310 Pages | AZW3 | 2.93 MB Learn how to build ...
"Mobile WEB 页面开发" 移动 Web 开发是指使用 Visual Studio 进行移动 Web 应用程序的开发。移动 Web 窗体页是一种专用的移动 Web 窗体页,它与任何其他 Web 窗体页一样,都是带.aspx 文件扩展名的文本文件。移动 ...
1. **jQuery Mobile**:这是一个基于jQuery的响应式框架,提供了丰富的UI组件和样式,适用于快速构建移动Web App。 2. **Sencha Touch**:这是另一个强大的框架,专注于触摸设备,提供了高性能的UI组件和数据绑定...
WGS84,GCJ-02,BD-09坐标系间的经纬度坐标转换代码,对不同地图坐标系间的经纬度坐标进行转换从而实现坐标系的统一。
因此,《Head First Mobile Web》提供了关于如何确保网站或应用程序能够在不同类型的设备上正常运行的具体指导。书中提到了服务器端设备检测技术,尤其是WURFL(What U Really Feel Like)这一工具,它可以用于识别...
4. "Mobile App Promo" - 这可能是模板文件夹,包含了所有必要的AE项目文件,用户可以在AE中打开并进行个性化编辑。 综合以上信息,我们可以得出以下知识点: 1. Adobe After Effects(AE)是视频编辑和特效制作的...
移动Web的使用在呈爆炸式增长。很快,人们会更愿意在手机和平板电脑而不是PC机上浏览网页。你的企业需要一种移动策略,不过从哪里开始呢?本书会告诉你如何使用你熟悉的Web技术建立网站和应用,可以在各种任意大小的...
- 如果有Mobile特有的配置或代码,可以通过条件判断来决定在Web或Mobile环境下执行哪部分代码。 3. **优化和适配**: 合并后,为了确保在不同设备上的兼容性和性能,可能需要进行一些优化和适配工作: - 图片和...
在Web应用开发中,jQuery Mobile 和 Web API 结合使用可以构建出功能强大且响应式的移动应用。本教程将深入探讨如何利用jQuery Mobile与C#实现的Web API2接口进行交互,展示列表数据。 **jQuery Mobile 简介** ...
- HTTPS与SSL/TLS:讲解HTTPS在移动Web中的重要性,以及如何配置和实施。 - 用户数据保护:讨论移动设备上的隐私问题,以及如何确保用户数据的安全。 10. **测试与调试** - 测试工具:介绍模拟器、真机测试、跨...
With users increasingly accessing the web on mobile devices, it’s crucial to make sure your website is built to seamlessly fit this radical change in user behavior. Mobile Web Performance ...
- **创建项目**:在Visual Studio中新建一个ASP.NET Web应用程序项目,并选择“Mobile Web Site”模板。 - **添加控件**:ASP.NET Mobile Controls包括各种控件,如`MobileForm`、`MobilePanel`等。这些控件可以...
例如,`<meta>`标签的使用对于Web App在移动设备上的表现至关重要,如设置视口(`viewport`)、启用全屏模式(`apple-mobile-web-app-capable`)、状态栏样式(`apple-mobile-web-app-status-bar-style`)以及防止自动识别...