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

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

初始的index.html如下所示：

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获取相应的参数信息，并加以持久化即可，在一些移动定位类的应用中，处理逻辑也大都如此，最后，我们来看一下完整的效果。如下图：