文档章节

Android应用开发之使用PhoneGap实现位置上报功能

Realfighter
 Realfighter
发布于 2015/02/05 10:55
字数 1123
阅读 682
收藏 3

    看这里: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

© 著作权归作者所有

Realfighter

Realfighter

粉丝 150
博文 139
码字总数 144564
作品 2
洛阳
程序员
私信 提问
加载中

评论(1)

诗人的咸鱼
回复一下... 竟然还是个洛阳的码农~ 哈哈
Android应用开发之使用PhoneGap实现拍照上传功能

看这里:Android应用开发之使用PhoneGap实现拍照上传功能 在之前的使用Intellij Idea 搭建PhoneGap Android开发环境以及Android应用开发之使用PhoneGap实现位置上报功能两篇文章中,我们学习...

Realfighter
2015/02/05
10.6K
3
使用 Jo 和 PhoneGap 构建本地移动应用程序

移动应用程序开发正在飞速发展;一部分原因是出现了可以简化开发的新框架,这种新框架也使传统 web 开发人员可以更快上手。本文将介绍如何利用您已经掌握的 HTML、CSS 和 JavaScript 技能和两...

IBMdW
2012/03/27
1K
0
Phonegap:快速开发跨平台HTML5应用的胶水层

在开发移动应用的过程当中,如果你的应用只定位在一种平台上,这可不是一个好主意,但是为许多不同的平台 Building应用又是一件非常麻烦和非常不爽的事情,因为你会发现每一种手机平台都有自...

红薯
2011/07/12
2.2K
3
关于跨平台移动应用开发框架的探索 -- PhoneGap

本文通过介绍移动互联网的发展,引出了跨平台移动应用开发的现状,并对当前的跨平台移动应用开发框架进行了比较。在实践环节中,本文首先使用 PhoneGap Build 将 HTML 程序发布为多移动平台的...

IBMdW
2011/11/24
3.7K
0
基于PhoneGap的Android应用开发-Get started

PhoneGap是一款开源的手机应用开发平台,它仅仅只用HTML和JavaScript语言就可以制作出能在多个移动设备上运行的应用。 PhoneGap将移动设备本身提供的复杂的API进行了抽象和简化,提供了一系列...

无鸯
2011/09/09
1K
1

没有更多内容

加载失败,请刷新页面

加载更多

Android 图片加载带进度条的ImageView

https://blog.csdn.net/shu_quan/article/details/79975578

shzwork
18分钟前
7
0
关于XAMPP默认端口80 和443被占用的问题

本文转载于:专业的前端网站➩关于XAMPP默认端口80 和443被占用的问题 关于安装xampp-win32-1.8.1-VC9-installer.zip后启动时候报端口80和443被占用的问题解决 xampp-win32-1.8.1-VC9-instal...

前端老手
20分钟前
6
0
错误Setting the parent of a transform which resides in a Prefab Asset is...

错误日志 Setting the parent of a transform which resides in a Prefab Asset is disabled to prevent data corruption 原因1 用Resouce.Load加载一个prefab,没有实例化直接设置parent ......

XBlock
20分钟前
9
0
Spring boot 配置mybatis

当然任何模式都需要首先引入mybatis-spring-boot-starter的pom文件,现在最新版本是1.1.1(刚好快到双11了 :)) <dependency>    <groupId>org.mybatis.spring.boot</groupId>    <......

雷开你的门
21分钟前
9
0
云栖干货回顾 | 更强大的实时数仓构建能力!分析型数据库PostgreSQL 6.0新特性解读

阿里云 AnalyticDB for PostgreSQL 为采用MPP架构的分布式集群数据库,完备支持SQL 2003,部分兼容Oracle语法,支持PL/SQL存储过程,触发器,支持标准数据库事务ACID。AnalyticDB PG通过行存...

开源中国小二
33分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部