一、概述
前两篇讲述了PhoneGap开发环境的搭建和百度LBS服务密钥的申请及配置,这一篇将详细讲解如何开发PhoneGap导航插件。
二、主要内容
PhoneGap插件开发大致有四个步骤:
1、注册插件( 其中注册插件并不是必须的,这种做法请参考后面参考链接的第2个链接的做法。这里就不再讲解)
2、编写js接口
3、配置config.xml文件
4、编写java实现
接下来就对每一个步骤进行详细的说明:
1、在assets目录下的cordova-plugins.js文件中配置插件,要配置两个地方,一个是module.exports= [{}];另一个是module.exports.metadata = { }
如下所示:
cordova.define('cordova/plugin_list', function(require, exports, module) {
module.exports = [
//Author: Gameloft9
//Time: 2015.8.25
//Description:
// file:接口所在js文件.
// id:插件Id.
//merges: 在 javascript中调用该插件的名称
{
"file": "plugins/intent.js",
"id": "org.apache.cordova.intent",
"merges": [
"navigator.intent"
]
},
{
"file": "plugins/HUBUNavigationPlugin/navigate.js", //导航插件js文件
"id": "cn.edu.hubu.navigation", //插件id
"merges": [
"navigator.HUBUNavigate" //调用名称
]
},
{
"file": "plugins/cordova-plugin-whitelist/whitelist.js",
"id": "cordova-plugin-whitelist.whitelist",
"runs": true
}
];
module.exports.metadata =
//还要添加元数据,设置插件版本号
// TOP OF METADATA
{
"org.apache.cordova.intent" :"0.0.1",
"cn.edu.hubu.navigation" :"0.0.1", //导航插件版本 0.0.1,这个是自己取的。
"cordova-plugin-whitelist": "1.0.0"
}
// BOTTOM OF METADATA
});
2、在assets-->www->plugins目录下编写javascript接口
在plugins目录下新建导航插件目录HUBUNavigationPlugin,并新建导航的js文件navigate.js,如下图所示:
navigate.js的内容如下:
/*
第一行中"cn.edu.hubu.navigation"为在cordova_plugins.js中定义的插件id
*/
cordova.define("cn.edu.hubu.navigation", function(require, exports, module) {
var exec = require('cordova/exec');
module.exports = {
/**
*
exec方法一共5个参数:
第一个 :成功回调
第二个 :失败回调
第三个 :将要调用的对象名(在config.xml中配置,对应于feature的name属性,value就是本地实现的java类)
第四个 :调用的方法名(java类中通过action识别方法名)
第五个 :传递的参数(json格式)
*/
//startNavigating : 插件的导航方法,方法名自己取。
//longtOrig,latOrig,longtDes,latDes:分别表示起点和终点的经纬度。
//通过调用cordova.exec()方法链接本地的java实现。
startNavigating: function(longtOrig,latOrig,longtDes,latDes) {
cordova.exec(
function(winParam){
//成功后的回调,这里仅仅弹出了返回参数。
alert(winParam);
},
function(err) {
//失败后的回调,可以弹出失败原因。
alert('fail'+err);
},
"HUBUNavigation", "intent", [longtOrig,latOrig,longtDes,latDes]);
},
};
});
3、在res-->xml目录下配置config.xml文件。
在config.xml文件中配置实现该接口的对象名及本地java类,如下所示:
<feature name="HUBUNavigation">
<param name="android-package" value="plugins.navigate" />
</feature>
其中name="HUBUNavigation"对应于navigate.js中exec方法的第三个参数。value="plugins.navigate"对应于本地实现该接口的java类。
4、在src目录下编写实现该接口的java文件
在src目录下创建plugins目录,并创建navigate.java文件,如下图所示:
navigate.java代码如下:
package plugins;
import java.net.URISyntaxException;
import org.apache.cordova.CallbackContext;
import org.apache.cordova.CordovaPlugin;
import org.json.JSONArray;
import org.json.JSONException;
import android.content.Intent;
/**
* js调用的方法在该类中实现 。该类必须继承CordovaPlugin
* CordovaPlugin里面有实现cordovaActivity的方法,提供startActivityForResult();
*
* @author Gameloft9
*
*/
public class navigate extends CordovaPlugin {
//构造函数
public navigate() {
}
//回调上下文,用于向js回传数据
CallbackContext callbackContext;
/**
* 对js接口的实现,通过重写execute方法实现,该方法有多重重载形式。
* */
@Override
public boolean execute(String action, JSONArray args,
CallbackContext callbackContext) throws JSONException {
this.callbackContext = callbackContext;
//根据action判断js调用的是哪个方法,这里的"intent"对应于js文件中exec方法中的第4个参数
if (action.equals("intent")) {
// 获取参数
String longtOrig = args.getString(0);
String latOrig = args.getString(1);
String longtDes = args.getString(2);
String latDes = args.getString(3);
//生成路径
String[] route = {longtOrig,latOrig,longtDes,latDes};
this.callBDNavigation(route);//调用百度地图客户端导航
return true;
}
return false;
}
/**
* 调用百度地图客户端进行导航
* @param route 导航起点终点
* */
private void callBDNavigation(String[] route) {
routeplanToNavi(route);
}
@Override
public void onActivityResult(int requestCode, int resultCode, Intent intent) {
super.onActivityResult(requestCode, resultCode, intent);
//传递返回值 给js方法
callbackContext.success("调用NavigateActivity成功!");
}
/**
* 移动APP调起Android百度地图
* @param route 路径包括起点终点(使用的GPS坐标(WGS84))
* */
private void routeplanToNavi(String[] route) {
Intent intent;
try {
//通过uri服务调启百度地图客户端,同时将路径参数传递过去
//调用参数可以参考百度LBS官网,地址如下:http://developer.baidu.com/map/index.php?title=uri/api/android
intent = Intent.getIntent("intent://map/direction?origin=latlng:"+route[1]+","+route[0]+"|name:起点"+"&destination="+route[3]+","+route[2]+"&mode=driving&coord_type=wgs84&src=HUBU|SmartParking#Intent;scheme=bdapp;package=com.baidu.BaiduMap;end");
cordova.startActivityForResult((CordovaPlugin) this,intent, 200);
} catch (URISyntaxException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
至此插件的开发就完成了,下面来进行测试:
1、在assets/www目录下的index.html添加如下内容:
<!DOCTYPE html>
<html>
<head>
<title>Notification Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
// Empty
}
//导航
function navigate() {
var longtOrig = 114.324775;
var latOrig = 30.580747;
var longtDes = 114.390421;
var latDes = 30.501860;
navigator.HUBUNavigate.startNavigating(longtOrig,latOrig,longtDes,latDes);
}
</script>
</head>
<body>
<p><a href="#" οnclick="navigate(); return false;">navigate</a></p>
</body>
</html>
添加一个a标签,在其点击事件中调用我们的导航插件。
2、将项目打包成apk,然后安装到手机上。同时确保手机上安装了最新的百度地图客户端。
3、运行打包好的app,界面如下:
点击navigate后,调用百度地图客户端,并根据传递的起点终点参数,规划好路径,如下图所示:
这时已经是百度地图了,点击右下角的导航,就可以进行导航了,如下图所示:
退出百度地图后,返回到我们app中,结果如下:
一切都运行正常,至此我们的插件开发就完成了!
百度LBS提供的服务有很多,大部分都可以集成到PhoneGap插件中来,例如POI查询,地图标注,地址及逆地址查询等等。上面涉及的一些函数可以查看cordova的官网,里面有详细的说明,地址如下:http://docs.phonegap.com/en/2.9.0/guide_plugin-development_index.md.html#Plugin%20Development%20Guide
参考链接:
1、http://blog.csdn.net/aaawqqq/article/details/20401111
2、http://blog.csdn.net/happyflyingave/article/details/25182369