转载自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经纬度信息 源码。
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...
Head First Mobile Web shows how to use the web tech- nology you’re already familiar with to make sites and apps that work on any device of any size. Put your JavaScript, CSS media query, and ...
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 ...
WGS84,GCJ-02,BD-09坐标系间的经纬度坐标转换代码,对不同地图坐标系间的经纬度坐标进行转换从而实现坐标系的统一。
移动Web的使用在呈爆炸式增长。很快,人们会更愿意在手机和平板电脑而不是PC机上浏览网页。你的企业需要一种移动策略,不过从哪里开始呢?本书会告诉你如何使用你熟悉的Web技术建立网站和应用,可以在各种任意大小的...
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 ...
互动设计新战场 你开始征程了吗? Mobile APP,你准备好了吗?
Mobile App Promo-手机APP宣传展示动画
High Performance Mobile Web 英文epub
If you are a web developer who wants to build hybrid mobile app development using the Ionic framework, then this comprehensive course is best-suited for you. What You Will Learn Get to know about ...
Master Mobile Web Apps with jQuery Mobile(3rd) 英文zip 第3版 本资源转载自网络,如有侵权,请联系上传者或csdn删除 查看此书详细信息请在美国亚马逊官网搜索此书
sql_mobile_app_devsql_mobile_app_devsql_mobile_app_devsql_mobile_app_devsql_mobile_app_devsql_mobile_app_dev
FLOWPRINT-Semi-Supervised Mobile-App.pdf
详细讲解如何使用Visual Studio 进行Mobile页面开发
Today, mobile is a must for every company, but how you reach users will determinate success or ... The Mobile Web World Chapter 2. Where to measure performance Chapter 3. Optimizing for the first visit
When was the last time you visited an app’s mobile web site rather than its native app counterpart? Was it an enjoyable experience? What did you like about it? What could have been better? Possibly ...
Web 2.0 is hot nowadays. Mobile Web 2.0 is the hottest buzzword. Want to learn mobile web development, Have a look at this book