在开发的过程中我们更多的是使用别人开发的cordova插件,但是在使用的过程中经常会遇到一些不合自己心意的问题,那么我们就来使用plugman开发一个属于自己的cordova插件吧。
源码地址 : https://github.com/DaiHuaXieHuaKai/GaoDeLocation.git
下面就以开发一个高德地图的定位插件为例:

第一步:检查是否具备开发环境

检查是否有cordova和plugman的环境
分别执行cordova -v和plugman -v查看是否有版本号出现,如果没有安装这两个环境请按照以下步骤安装:
安装crodva和plugman都需要使用nodejs的npm管理工具,所以我们先要安装nodejs,nodejs下载地址,下载安装后执行npm -v出现版本号即安装成功。

安装cordova:
npm install -g cordova
安装plugman:
npm install -g plugman

然后分别执行cordova -v和plugman -v检查是否环境搭建成功。

第二步:使用plugman创建插件模板

//创建插件 (GaoDeLocation为插件名称, com.zhaoying.GaoDeLocation为插件id
plugman create --name GaoDeLocation --plugin_id com.zhaoying.GaoDeLocation--plugin_version 1.0.0//进入GaoDeLocation 目录
cd GaoDeLocation //为插件添加android平台(此处只添加了安卓,如果要开发ios插件请执行plugman platform add --platform_name ios)
plugman platform add --platform_name android

模板创建成功后目录格式如下:

第三步:修改配置模板

1、修改plugin.xml
plugin.xml的配置非常重要,以下是几个重要的地方:

元素 描述
id 插件id,创建插件的时候设定,该id可用于添加插件,如:cordova plugin add com.zhaoying.GaoDeLocation
name 插件名称
js-module 这里指定clobbers ,然后通过它来调用GaoDeLocation.js,此处应该对应GaoDeLocation.js中exports的对象
preference 指定参数,比如这里设定了API_KEY这个参数,在添加插件的时候就必须加上–variable API_KEY=your key
config-file 这里主要是填写一些配置信息,比如高德定位的获取定位权限等等
source-file 用于指定引用的libs的资源和路径

我们修改后的plugin.xml如下:

<?xml version='1.0' encoding='utf-8'?>
<plugin id="com.zhaoying.GaoDeLocation" version="1.0.0" xmlns="http://apache.org/cordova/ns/plugins/1.0"xmlns:android="http://schemas.android.com/apk/res/android"><name>GaoDeLocation</name><js-module name="GaoDe" src="www/GaoDeLocation.js"><clobbers target="GaoDe"/></js-module><preference name="API_KEY" /><platform name="android"><config-file parent="/*" target="res/xml/config.xml"><feature name="GaoDeLocation"><param name="android-package" value="com.zhaoying.GaoDeLocation.GaoDeLocation"/></feature></config-file><!--以下配置完全按照高德的指南进行配置,详见:http://lbs.amap.com/api/android-location-sdk/gettingstarted/--><config-file target="AndroidManifest.xml" parent="/manifest/application"><!--在AndroidManifest.xml的application标签中配置Key:--><meta-data android:name="com.amap.api.v2.apikey" android:value="$API_KEY"></meta-data><!--在application标签中声明service组件:--><service android:name="com.amap.api.location.APSService"></service></config-file><config-file parent="/*" target="AndroidManifest.xml"><!--用于进行网络定位--><uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"></uses-permission><!--用于访问GPS定位--><uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"></uses-permission><!--获取运营商信息,用于支持提供运营商信息相关的接口--><uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"></uses-permission><!--用于访问wifi网络信息,wifi信息会用于进行网络定位--><uses-permission android:name="android.permission.ACCESS_WIFI_STATE"></uses-permission><!--这个权限用于获取wifi的获取权限,wifi信息会用来进行网络定位--><uses-permission android:name="android.permission.CHANGE_WIFI_STATE"></uses-permission><!--用于访问网络,网络定位需要上网--><uses-permission android:name="android.permission.INTERNET"></uses-permission><!--用于读取手机当前的状态--><uses-permission android:name="android.permission.READ_PHONE_STATE"></uses-permission><!--写入扩展存储,向扩展卡写入数据,用于写入缓存定位数据--><uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"></uses-permission><!--用于申请调用A-GPS模块--><uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS"></uses-permission><!--用于申请获取蓝牙信息进行室内定位--><uses-permission android:name="android.permission.BLUETOOTH"></uses-permission><uses-permission android:name="android.permission.BLUETOOTH_ADMIN"></uses-permission></config-file><source-file src="src/android/GaoDeLocation.java" target-dir="src/com/zhaoying/GaoDeLocation"/><source-file src="libs/android/AMap_Location_V3.3.0.jar" target-dir="libs" /></platform>
</plugin>

此处我们要注意需要将:

  <source-file src="src/android/GaoDeLocation.java" target-dir="src/com/zhaoying/GaoDeLocation/GaoDeLocation"/>

修改为:

        <source-file src="src/android/GaoDeLocation.java" target-dir="src/com/zhaoying/GaoDeLocation"/>

如果不修改的话会找不到GaoDeLocation.js.

第四步:添加高德SDK,修改GaoDeLocation.js

首先在http://lbs.amap.com/api/android-location-sdk/download/下载需要用到的jar包,这里我们只需要下载定位的jar即可。
下载完成后将其解压,并将jar包引入插件项目,这里需要我们在插件项目中创建一个libs文件夹来放jar包,最终结构如下:

然后我们先要修改GaoDeLocation.js文件,将其修改为:

var exec = require('cordova/exec');var GaoDe = {getCurrentPosition:function (successFn,errorFn) {exec(successFn,errorFn,'GaoDeLocation','getCurrentPosition',[]);}
};module.exports = GaoDe;

然后我们需要修改GaoDeLocation.java文件,修改为:(具体的方法可以参照官方demo进行添加或修改)

package com.zhaoying.GaoDeLocation;import org.apache.cordova.CordovaPlugin;
import org.apache.cordova.CallbackContext;
import org.apache.cordova.PluginResult;import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;import com.amap.api.location.AMapLocation;
import com.amap.api.location.AMapLocationClient;
import com.amap.api.location.AMapLocationClientOption;
import com.amap.api.location.AMapLocationClientOption.AMapLocationMode;
import com.amap.api.location.AMapLocationClientOption.AMapLocationProtocol;
import com.amap.api.location.AMapLocationListener;/*** @author zhaoying*/
public class GaoDeLocation extends CordovaPlugin {//声明AMapLocationClient类对象public AMapLocationClient locationClient = null;//声明定位参数public AMapLocationClientOption locationOption = null;/*** JS回调接口对象*/public static CallbackContext cb = null;/** 程序入口* */@Overridepublic boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {if (action.equals("getCurrentPosition")) {cb = callbackContext;PluginResult pluginResult = new PluginResult(PluginResult.Status.NO_RESULT);pluginResult.setKeepCallback(true);cb.sendPluginResult(pluginResult);this.getCurrentPosition();return true;}return false;}/*** 获取定位** @author zhaoying*/private void getCurrentPosition() {if (locationClient == null) {this.initLocation();}this.startLocation();}/*** 初始化定位** @author zhaoying*/private void initLocation() {//初始化clientlocationClient = new AMapLocationClient(this.webView.getContext());//设置定位参数locationClient.setLocationOption(getDefaultOption());// 设置定位监听locationClient.setLocationListener(locationListener);}/*** 默认的定位参数** @author zhaoying*/private AMapLocationClientOption getDefaultOption() {AMapLocationClientOption mOption = new AMapLocationClientOption();mOption.setLocationMode(AMapLocationMode.Hight_Accuracy);//可选,设置定位模式,可选的模式有高精度、仅设备、仅网络。默认为高精度模式mOption.setGpsFirst(false);//可选,设置是否gps优先,只在高精度模式下有效。默认关闭mOption.setHttpTimeOut(30000);//可选,设置网络请求超时时间。默认为30秒。在仅设备模式下无效mOption.setInterval(2000);//可选,设置定位间隔。默认为2秒mOption.setNeedAddress(true);//可选,设置是否返回逆地理地址信息。默认是truemOption.setOnceLocation(false);//可选,设置是否单次定位。默认是falsemOption.setOnceLocationLatest(false);//可选,设置是否等待wifi刷新,默认为false.如果设置为true,会自动变为单次定位,持续定位时不要使用AMapLocationClientOption.setLocationProtocol(AMapLocationProtocol.HTTP);//可选, 设置网络请求的协议。可选HTTP或者HTTPS。默认为HTTPmOption.setSensorEnable(false);//可选,设置是否使用传感器。默认是falsemOption.setWifiScan(true); //可选,设置是否开启wifi扫描。默认为true,如果设置为false会同时停止主动刷新,停止以后完全依赖于系统刷新,定位位置可能存在误差mOption.setLocationCacheEnable(true); //可选,设置是否使用缓存定位,默认为truereturn mOption;}/*** 定位监听*/AMapLocationListener locationListener = new AMapLocationListener() {@Overridepublic void onLocationChanged(AMapLocation location) {try {JSONObject json = new JSONObject();if (null != location) {//解析定位结果//errCode等于0代表定位成功,其他的为定位失败,具体的可以参照官网定位错误码说明if (location.getErrorCode() == 0) {json.put("status", "定位成功");//定位类型json.put("type", location.getLocationType());//纬度json.put("latitude", location.getLatitude());//经度json.put("longitude", location.getLongitude());//精度json.put("accuracy", location.getAccuracy());//角度json.put("bearing", location.getBearing());// 获取当前提供定位服务的卫星个数//星数json.put("satellites", location.getSatellites());//国家json.put("country", location.getCountry());//省json.put("province", location.getProvince());//市json.put("city", location.getCity());//城市编码json.put("citycode", location.getCityCode());//区json.put("district", location.getDistrict());//区域码json.put("adcode", location.getAdCode());//地址json.put("address", location.getAddress());//兴趣点json.put("poi", location.getPoiName());//兴趣点json.put("time", location.getTime());} else {json.put("status", "定位失败");json.put("errcode", location.getErrorCode());json.put("errinfo", location.getErrorInfo());json.put("detail", location.getLocationDetail());}//定位之后的回调时间json.put("backtime",System.currentTimeMillis());} else {}PluginResult pluginResult = new PluginResult(PluginResult.Status.OK, json);pluginResult.setKeepCallback(true);cb.sendPluginResult(pluginResult);} catch (JSONException e) {PluginResult pluginResult = new PluginResult(PluginResult.Status.ERROR, e.getMessage());pluginResult.setKeepCallback(true);cb.sendPluginResult(pluginResult);} finally {locationClient.stopLocation();}}};/*** 开始定位** @author zhaoying*/private void startLocation() {// 启动定位locationClient.startLocation();}/*** 停止定位** @author zhaoying*/private void stopLocation() {// 停止定位locationClient.stopLocation();}/*** 销毁定位** @author zhaoying*/private void destroyLocation() {if (null != locationClient) {/*** 如果AMapLocationClient是在当前Activity实例化的,* 在Activity的onDestroy中一定要执行AMapLocationClient的onDestroy*/locationClient.onDestroy();locationClient = null;locationOption = null;}}}

第五步:添加插件,调用定位

首先新建一个ionic项目(具体方法参照ionic官网文档)
项目新建完成后,添加刚刚新建完成的插件:

cordova plugin add C:\Users\HD\GaoDeLocation --variable API_KEY=yourkey

这里需要用到API_KEY,该key需要在高德地图的控制台去申请,具体参照

添加完成后就可以在页面中调用定位方法了:

    GaoDe.getCurrentPosition(function (success) {console.log(success);},function (error) {console.log(error)})

使用plugman开发cordova 高德地图定位插件相关推荐

  1. vue 高德地图 定位插件 地图实例插件 获取点击的地方的经纬度和具体地址

    npm 安装 推荐 npm 安装. npm install vue-amap --saveimport VueAMap from 'vue-amap';Vue.use(VueAMap); VueAMa ...

  2. flutter 获取定位_从头开发一个Flutter插件(二)高德地图定位插件

    在上一篇文章从头开发一个Flutter插件(一)开发流程里具体介绍了flutter插件的具体开发流程,从创建项目到发布.接下来将会为Flutter天气项目开发一个基于高德定位sdk的flutter定位 ...

  3. Cordova高德地图定位、ionic2/3/4高德地图定位(解决部分国产手机无法定位的情况)

    高德地图定位 (2.0.5版本) 插件环境 cordova-android >= 7.0.0 清晰的文档请看:点击转到github文档 1.申请密钥 请参照: 申请android密钥定位SDK ...

  4. Android开发实现高德地图定位详解

     一. 要实现高德地图定位呢,首先需要做好以下几步准备: 1. 在高德开放平台注册帐号 注册地址:http://lbs.amap.com 2. 在开发中下载Android平台下的地图SDK和定位S ...

  5. Android开发之高德地图定位成功返回的定位信息

    /*** 定位监听*/AMapLocationListener locationListener = new AMapLocationListener() {@Overridepublic void ...

  6. ios 持续获取定位 高德地图_【IOS开发】高德地图定位坐标偏差()

    CLLocationManager类可以实时的获得我们位置的经纬度,并且可以通过经纬度在MapView上定位: //创建CLLocationManager对象 CLLocationManager*lo ...

  7. vue-amap 实现高德地图定位 + 搜索 +回显

    1.注册成为开发者  -> 申请秘钥key 调用高德api 高德地图开放平台:https://lbs.amap.com/?ref=https://console.amap.com/dev/ind ...

  8. vue项目引入高德地图(定位、搜索、经纬度解析地址)

    1.npm 安装 npm install vue-amap --save 2.main.js文件引入vue-amap import VueAMap from 'vue-amap' Vue.use(Vu ...

  9. vue项目使用高德地图定位当前地址

    vue项目使用高德地图定位当前地址 一.在项目中安装vue-amap插件 二.页面代码 三.data数据 一.在项目中安装vue-amap插件 1.最终效果 2.安装命令 npm install vu ...

最新文章

  1. 华为鸿蒙运行视频,某游戏在华为鸿蒙运行,被识别成使用安卓模拟器
  2. 惠普z640服务器装系统,顾问文档: HP Z440、Z640 和 Z840 工作站 - 在采用 Broadwell 处理器的系统上安装 HP ZTurbo Quad Pro 后,出现黑屏...
  3. python画切片图_python切片操作
  4. spring batch
  5. 技术分享:开源矿工的超频
  6. The Event System
  7. 0% [正在连接 cn.archive.ubuntu.com (2001:67c:1562::19)]关于其连接不上的问题:
  8. 一本通1586【 例 2】数字游戏
  9. 2020-11-30 03_空域图像处理 笔记
  10. 第四章OFDM(1)
  11. 【知识图谱系列】PairNorm、DropEdge、DAGNN、Grand和GCNII五篇2020 Over-Smoothing论文综述
  12. Spring的9种设计模式(三)总结
  13. FDTD Solutions初学笔记
  14. Unicode编码和解码(3种)
  15. Java基础系列(五)——Collection集合Map源码详解
  16. 如何使用TPTP中的IDatapool
  17. cordova应用兼容iOS11+和iPhoneX刘海屏
  18. uni-app使用map组件开发map地图,获取后台返回经纬度进行标点
  19. MySQL备份恢复之mysqldump备份_SQL语句模式
  20. 云计算-云平台-国产-华为-FusionSphere

热门文章

  1. 有没有免费压缩视频的软件?压缩视频其实很简单
  2. 老外眼里的中式英语PK标准英语
  3. MAYA oceanShader/海洋(纹理)
  4. macbook 终端命令怎么使用_苹果MAC系统怎么使用ping命令打开终端?
  5. 基于SSM的快递代取管理系统
  6. 互联网-2互联网思维特点和理念
  7. 图书管理系统(图书类)
  8. H263H264MPEG4
  9. 颠覆你想象的150个故事(1)
  10. 腾讯云老用户重新注册新账号算新用户吗?