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方法实现，该方法有多重重载形式。
	 * */
	@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