Android應用開發之使用PhoneGap實現位置上報功能

時間 2019-11-06

標籤 android 應用開發使用 phonegap 實現位置上報功能欄目 Android 简体版

原文原文鏈接

看這裏：Android應用開發之使用PhoneGap實現位置上報功能
javascript

上一篇，使用Intellij Idea 搭建PhoneGap Android開發環境中，簡單的介紹了PhoneGap Android開發環境的搭建，而且開發了Hello World的應用，本篇，咱們繼續學習使用PhoneGap進行開發，獲取用戶設備的位置信息，經過獲取經緯度實現位置上報的功能，接下來，開始本篇的學習。php

咱們在上篇module的基礎上進行開發，主要是修改index.html中的內容，爲了操做DOM方便，咱們引入jquery.min.js，爲了經過設備的經緯度獲取詳細的位置信息，咱們使用了BaiduMap提供的API，須要註冊百度開發者帳號，而且建立應用，獲取相應的key，這裏不在贅述，詳細看這裏。css

初始的index.html以下所示：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函數，分別對應定位成功或失敗的狀況，代碼以下：java

<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，咱們能夠拿到成功後的經緯度，海拔等一組地理座標信息，這裏只是簡單的獲取一下經緯度信息，並將其顯示在屏幕上，代碼如下：jquery

var locate = $("#geoLocation");
var html = "經度：" + position.coords.longitude + "<br/>緯度：" + position.coords.latitude;
locate.html(html);

接下來是，經過經緯度信息獲取當前位置的功能，經過baidumap提供的API，咱們使用了javascript Api極速版來顯示地圖等信息，詳細見這裏。代碼以下：git

            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提交請求，獲取響應便可，代碼以下：web

//自動位置上報
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獲取相應的參數信息，並加以持久化便可，在一些移動定位類的應用中，處理邏輯也大都如此，最後，咱們來看一下完整的效果。以下圖：ajax