標籤：
看這裡：Android應用開發之使用PhoneGap實現位置上報功能
上一篇，使用Intellij Idea 搭建PhoneGap Android開發環境中，簡單的介紹了PhoneGap Android開發環境的搭建，並且開發了Hello World的應用，本篇，我們繼續學習使用PhoneGap進行開發，擷取使用者裝置的位置資訊，通過擷取經緯度實現位置上報的功能，接下來，開始本篇的學習。
我們在上篇module的基礎上進行開發，主要是修改index.html中的內容，為了操作DOM方便，我們引入jquery.min.js，為了通過 裝置的經緯度擷取詳細的位置資訊，我們使用了BaiduMap提供的API，需要註冊百度開發人員帳號，並且建立應用，擷取相應的key，這裡不在贅述，詳 細看這裡。
初始的index.html如下所示：
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> <style type="text/css"> body, html, #map { width: 100%; height: 100%; overflow: hidden; margin: 0; } </style> <script type="text/javascript" src="http://api.map.baidu.com/api?type=quick&ak=v39tYjUNeLluTojzZGqmNHpQ&v=1.0"></script> <script type="text/javascript" charset="utf-8" src="../js/cordova.js"></script> <script type="text/javascript" charset="utf-8" src="../js/jquery-1.7.1.min.js"></script> <title>Hello PhoneGap</title> <script type="text/javascript"> </script></head><body> <h1>Hello PhoneGap</h1> <!-- 這裡用來顯示經緯度及位置資訊 --> <p id="geoLocation"></p> <!--這裡用來顯示地圖--> <div id="map"></div></body></html>
接下來，我們需要通過phonegap提供的api，編寫js代碼擷取相應的裝置經緯度資訊，詳細的官方api見這裡。首先我們在應用啟動的時候增加一個Listener，調用navigator.geolocation.getCurrentPosition方法擷取當前裝置的經緯度資訊，getCurrentPosition方法接收兩個Callback函數，分別對應定位成功或失敗的情況，代碼如下：
<script type="text/javascript"> document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { navigator.geolocation.getCurrentPosition(locateSuccess, locateError); } function locateSuccess(position) { navigator.notification.alert("定位成功！", null, "提醒"); } function locateError(error) { navigator.notification.alert("定位失敗：" + error.message, null, "警告"); }</script>
我們發現在locateSuccess函數中，有一個position參數，這個是定位成功後phonegap封裝的包含位置資訊的一個參數，通過 position.coords，我們可以拿到成功後的經緯度，海拔等一組地理座標資訊，這裡只是簡單的擷取一下經緯度資訊，並將其顯示在螢幕上，代碼如 下：
var locate = $("#geoLocation");var html = "經度：" + position.coords.longitude + "<br/>緯度：" + position.coords.latitude;locate.html(html);
接下來是，通過經緯度資訊擷取當前位置的功能，通過baidumap提供的API，我們使用了javascript Api極速版來顯示地圖等資訊，詳細見這裡。代碼如下：
var map = new BMap.Map("map"); //在相應的DOM處展現地圖 var point = new BMap.Point(position.coords.longitude, position.coords.latitude); map.centerAndZoom(point, 14); //以當前經緯度資訊為地圖中心點 map.addOverlay(new BMap.Marker(point));//地圖上添加標註// map.enableScrollWheelZoom(); var gc = new BMap.Geocoder(); //根據當前地圖中心點，擷取詳細的位置資訊：省市區街道牌號等 gc.getLocation(point, function (rs) { var addComp = rs.addressComponents; var address = addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber; //將詳細的位置資訊追加到指定的DOM中 locate.html(locate.html() + "<br/>地址：" + address); });
通過上面的開發，我們已經擷取了裝置的經緯度及位置資訊，但是並沒有對位置資訊進行儲存，在正式的開發應用中，我們經常需要對這些資訊進行儲存持久化等操 作，接下來，我們來看一下通過phonegap進行位置的上報，很簡單，通過ajax提交請求，擷取響應即可，代碼如下：
//自動位置上報var url = "http://192.168.0.32:8888/app/location.jfinal";var data = { latitude: position.coords.latitude,//緯度 longitude: position.coords.longitude,//經度 uuid: device.uuid// 裝置唯一標識};$.post(url, data, function () { navigator.notification.alert("自動位置上報成功！", null, "提醒");});
至此，我們的應用已經基本開發完整，在服務端代碼的編寫中，我們只需要通過request擷取相應的參數資訊，並加以持久化即可，在一些移動定位類的應用中，處理邏輯也大都如此，最後，我們來看一下完整的效果。如：
完整代碼地址：http://git.oschina.net/realfighter/Hello-PhoneGap/blob/master/assets/www/html/geolocation.html
Android應用開發之使用PhoneGap實現位置上報功能
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
