PhoneGap插件开发---基于百度LBS的导航插件(三)

一、概述

    前两篇讲述了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方法实现，该方法有多重重载形式。 * */@Overridepublic 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);}@Overridepublic 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/androidintent = 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 blocke.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="#" onclick="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