使用 PhoneGap和百度地图服务快速开发移动地图应用

liuguichuan 2014-04-24

展开全文

PhoneGap 提供了优秀的混合式移动应用开发能力，支持利用Web技术来快速开发移动应用并且充分利用移动设备的原生功能。下面我们就简单介绍一下如何利用PhoneGap、百度地图和定位服务快速开发一个Andriod地图应用。

开发环境准备

1. ADT

2. Node.js

3. PhoneGap 3.0

4. Git

注册百度地图开发者服务并申请密钥

http://lbsyun.baidu.com/apiconsole/key?application=key

注意

因为有很多中文注释，请将Eclipse中的缺省字符代码设置为UTF-8，Windows -> Preferences -> General -> Workspace -> Text File Encoding 选择 Other: UTF-8

1. 首先创建一个PhoneGap应用项目

phonegap create -n MyMapApp -i com.example.mymapapp MyMapApp

cd MyMapApp

phonegap run android

系统会提示如下信息，并执行应用

[phonegap] detecting Android SDK environment...
[phonegap] using the local environment
[phonegap] adding the Android platform...
[phonegap] compiling Android...
[phonegap] successfully compiled Android app
[phonegap] trying to install app onto device
[phonegap] successfully installed onto device

注意

如果无法启动应用请检查ADT SDK设置，并且系统环境变量中应包含ADT sdk\tools 和 sdk\platform-tools 的目录

2. 然后将创建的项目导入ADT中

选择File -> Import ... -> Android -> Existing Android Code Into Workspace

3. 将百度地图加入应用

3.1 修改 index.html

<! DOCTYPE html>

< html>

<head >

< meta charset= "utf-8" />

< meta name= "format-detection" content = "telephone=no" />

< meta name= "viewport" content = "initial-scale=1.0, user-scalable=no" />

< style type= "text/css" >

body,html, #l-map {

width: 100% ;

height: 100% ;

overflow: hidden ; hidden ;

margin: 5;

}

</ style>

< title> My Map Application </title >

</head >

<body >

< div id= "l-map" ></div >

< script type= "text/javascript" src = "phonegap.js"></ script >

< script type= "text/javascript" src = "location.js"></ script >

< script type= "text/javascript" src ="http://api.map.baidu.com/api?type=quick&ak=XXXXXXXXXXXXXXXXXXXXXXXX&v=1.0" ></ script>

< script type= "text/javascript" src = "js/index.js"></ script >

< script type= "text/javascript" >

app.initialize();

</ script>

</body >

</ html>

3.2 将 index.html中加载百度地图URL中ak=XXXXXXXXXXXXXXXXXXXXXXXX值替换为申请的应用密钥（移动端）

3.3 修改 index.js 支持地图定位

function onLocatingSuccess(position) {

var point = new BMap.Point(position.coords.longitude, position.coords.latitude)

app.addMarker(point)

}

function onLocatingError(error) {

alert( 'code: ' + error.code + '\n' + 'message: ' + error.message + '\n' );

}

var app = {

// Application Constructor

initialize: function() {

this .bindEvents();

//创建地图对象

this .createMap();

// Bind Event Listeners

// Bind any events that are required on startup. Common events are:

// 'load', 'deviceready', ' offline', and 'online'.

bindEvents: function() {

document.addEventListener( 'deviceready' , this .onDeviceReady, false);

// deviceready Event Handler

// The scope of 'this' is the event. In order to call the 'receivedEvent'

// function, we must explicity call 'app.receivedEvent(...);'

onDeviceReady: function() {

app.receivedEvent( 'deviceready' );

// Locate on a Received Event

receivedEvent: function(id) {

console.log( 'Received Event: ' + id);

navigator.geolocation.getCurrentPosition(onLocatingSuccess, onLocatingError);

createMap: function(){ // 创建地图对象

var map = new BMap.Map("l-map" );

map.centerAndZoom( new BMap.Point(116.404, 39.915), 14);

var zoomControl= new BMap.ZoomControl();

map.addControl(zoomControl);

var scaleControl= new BMap.ScaleControl();

map.addControl(scaleControl);

this .map = map;

addMarker: function(point){

this.map.centerAndZoom(point, 16);

// 创建图标对象

var myIcon = new BMap.Icon("http://api.map.baidu.com/mapCard/img/location.gif" ,

new BMap.Size(14, 23), {

// 指定定位位置。

anchor: new BMap.Size(7, 25),

});

// 创建标注对象并添加到地图

var marker = new BMap.Marker(point, {icon: myIcon});

this .map.addOverlay(marker);

}

};

3.4 修改/MyMapApp/AndroidManifest.xml

加入如下权限设置

<uses-permission android:name ="android.permission.ACCESS_COARSE_LOCATION" />

<uses-permission android:name= "android.permission.ACCESS_FINE_LOCATION" />

<uses-permission android:name= "android.permission.ACCESS_WIFI_STATE" />

<uses-permission android:name= "android.permission.ACCESS_NETWORK_STATE" />

<uses-permission android:name= "android.permission.CHANGE_WIFI_STATE" />

<uses-permission android:name= "android.permission.READ_PHONE_STATE" />

<uses-permission android:name= "android.permission.WRITE_EXTERNAL_STORAGE" />

<uses-permission android:name= "android.permission.INTERNET" />

<uses-permission android:name= "android.permission.MOUNT_UNMOUNT_FILESYSTEMS" />

<uses-permission android:name= "android.permission.READ_LOGS" />

运行后，就可以看见百度地图出现在应用中，并根据手机获取的定位信息定位到你所在位置 :-)

不过由于天朝要求对经纬度进行加密，即使用手持设备或者导航设备获取到的经纬度，也无法准确在地图上定位而存在很大的偏移。下面我们将利用PhoneGap将百度的定位服务包装成一个插件来解决精确定位的问题。网上很多文章只提供了PhoneGap 2.x的做法而PhoneGap 3.x对插件结构作了很大调整，都不太适用。

4. 配置Android版百度定位SDK

请从下面网址下载百度定位SDK

http://developer.baidu.com/map/geosdk-android-download.htm

并按照如下文章配置项目

http://developer.baidu.com/map/geosdk-android-developv4.0.htm

4.1 在 /MyMapApp/AndroidManifest.xml 中applicaion部分加入

< service android:enabled ="true" android:name= "com.baidu.location.f" android:process =":remote" ></ service>

4.2. 将locSDK_4.0.jar复制到libs目录，并将liblocSDK4.so复制到libs/armeabi目录

这时目录结构应该是这个样子