博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Android应用开发之使用PhoneGap实现位置上报功能
阅读量:6834 次
发布时间:2019-06-26

本文共 2916 字,大约阅读时间需要 9 分钟。

hot3.png

    看这里:

    上一篇,中,简单的介绍了PhoneGap Android开发环境的搭建,并且开发了Hello World的应用,本篇,我们继续学习使用PhoneGap进行开发,获取用户设备的位置信息,通过获取经纬度实现位置上报的功能,接下来,开始本篇的学习。

    我们在上篇module的基础上进行开发,主要是修改index.html中的内容,为了操作DOM方便,我们引入jquery.min.js,为了通过 设备的经纬度获取详细的位置信息,我们使用了BaiduMap提供的API,需要注册百度开发者账号,并且创建应用,获取相应的key,这里不在赘述,详 细看。

        初始的index.html如下所示:

    
    
    
        body, html, #map {            width: 100%;            height: 100%;            overflow: hidden;            margin: 0;        }        
    
    
    
Hello PhoneGap    
         

Hello PhoneGap

    
    

    
    

        接下来,我们需要通过phonegap提供的api,编写js代码获取相应的设备经纬度信息,详细的官方api见。首先我们在应用启动的时候增加一个Listener,调用navigator.geolocation.getCurrentPosition方法获取当前设备的经纬度信息,getCurrentPosition方法接收两个Callback函数,分别对应定位成功或失败的情况,代码如下:

    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, "警告");    }

    我们发现在locateSuccess函数中,有一个position参数,这个是定位成功后phonegap封装的包含位置信息的一个参数,通过 position.coords,我们可以拿到成功后的经纬度,海拔等一组地理坐标信息,这里只是简单的获取一下经纬度信息,并将其显示在屏幕上,代码如 下:

var locate = $("#geoLocation");var html = "经度:" + position.coords.longitude + "
纬度:" + 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() + "
地址:" + 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获取相应的参数信息,并加以持久化即可,在一些移动定位类的应用中,处理逻辑也大都如此,最后,我们来看一下完整的效果。如下图:

 05105519_ldt8.jpeg

    完整代码地址:

转载于:https://my.oschina.net/realfighter/blog/375583

你可能感兴趣的文章
前端那些事之websoket篇
查看>>
vs环境下C++dll生成和使用(基础篇)
查看>>
Android 面试题总结之Android 基础(一)
查看>>
CentOS6.5下安装mysql-5.6
查看>>
Unable to find the wrapper "https"错误的解决办法
查看>>
Guava并发:ListenableFuture与RateLimiter示例
查看>>
hdoj_1042_N!_大數優化_模擬
查看>>
美团扫码付小程序的优化实践
查看>>
将应用的数据库复制到SD卡上面
查看>>
squid windows 配置日志
查看>>
wordpress 安装主题
查看>>
linux磁盘管理及文件系统
查看>>
梭子鱼垃圾邮件网关-Barracuda Spam & Virus Firewall Email Alert: outQueueHigh
查看>>
mysql性能调优my.cnf详解
查看>>
Java基础知识回顾-7
查看>>
Django 使用分页
查看>>
实现HTTPS系列第五弹(终章)之【通过OpenSSL实现HTTPS】
查看>>
Windows API OpenURL无法设置超时时间替换方法
查看>>
Linux 下 MySQL 5.5.8 源码编译安装记录
查看>>
Linux启动级别切换
查看>>