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

完整代码地址：http://git.oschina.net/realfighter/Hello-PhoneGap/blob/master/assets/www/html/geolocation.htmlapi