用cordova做地图定位，由于phonegap100上没有合适自己的插件，iOS的定位已经做好了，要是把它做成插件就好将结果调到H5界面上去了。于是捣鼓了一个多星期，终于将一个地图定位插件做好了。下面分享一下这个插件开发过程。
第一步，是在创建xcode工程 完成地图定位功能，实现功能后，并进行真机测试，达到自己想要的要求。
第二步，创建一些文件夹以及文件，文件夹结构如下图所示：
224439.png
这个插件我把它命名为Map, 里边包含src 和www两个文件夹。src这个文件夹主要是用来存放对应平台的原生工程文件。如果你需要使用安卓或者WP的支持也可以。我这里只做了iOS的。www，这个文件夹是一个js文件。
创建一个plugin.xml文件 和 Map.js文件
plugin.xml文件里边的内容：
<?xml version="1.0" encoding="UTF-8"?>
<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0"
id="cordova-plugin-Map"
version="1.1.1-dev">
<name>Map</name>
<description>Cordova Map Plugin</description>
<author>YT</author>
<license>Apache 2.0</license>
<keywords>cordova,QRCode</keywords>
<repo>https://git@github.com:OceanOver/QRCode.git</repo>
<js-module src="www/Map.js" name="Map">
<clobbers target="Map" />
</js-module>
<!-- ios -->
<platform name="ios">
<config-file target="config.xml" parent="/*">
<feature name="Map">
<param name="ios-package" value="CDVMap" />
</feature>
</config-file>
<header-file src="src/ios/CDVMap.h" />
<source-file src="src/ios/CDVMap.m" />
<header-file src="src/ios/LocationViewController.h" />
<source-file src="src/ios/LocationViewController.m" />
<framework src="CoreLocation.framework" />
<framework src="MapKit.framework" />
</platform>
</plugin>
615A269A-EE53-4143-849E-2DF7FDBE533F.png
注意：如果你的工程需要添加依赖库 必须卸载这里才可以，然后添加的时候就可以自动导入了。
CDVMap.h的代码，这个类继承自Cordova/CDVPlugin.h
//
// CDVMap.h
// HelloWorld
//
// Created by JUST-IMAC on 16/3/17.
//
//
#import <Cordova/CDVPlugin.h>
@interface CDVMap : CDVPlugin
- (void)map:(CDVInvokedUrlCommand*)command;
@end
//
// CDVMap.m
// HelloWorld
//
// Created by JUST-IMAC on 16/3/17.
//
//
CDVMap.m的代码
#import "CDVMap.h"
#import "LocationViewController.h"
@interface CDVMap ()
@end
@implementation CDVMap
- (void)map:(CDVInvokedUrlCommand*)command {
NSString *callBackId = command.callbackId;
//将callbackId;传入你的控制器中
LocationViewController *qrCodeController = [[LocationViewController alloc] init];
qrCodeController.callBackId = callBackId;
qrCodeController.qrCode = self;
//调用原生控制器
[self.viewController presentViewController:qrCodeController animated:YES completion:nil];
}
@end
LocationViewController.h的代码
//
// LocationViewController.h
// 系统地图定位
//
// Created by admin on 16/7/9.
// Copyright © 2016年 davidde. All rights reserved.
//
#import <UIKit/UIKit.h>
#import "CDVMap.h"
@interface LocationViewController : UIViewController
//这两个参数是必须的
@property(nonatomic,weak) CDVMap *qrCode;
@property(nonatomic,copy) NSString *callBackId;
@end
LocationViewController.m的代码
这里边的代码我就不贴了，
这里我需要在原生地图中获取得到的定位信息，传到h5界面中处理。
于是调用
Map.js里边的代码
665009B4-81FF-4646-BABF-0B8447B30A72.png
这里不需要上传到git,所以不需要做package.json文件里边的处理
到此一个插件已经基本上做好了
接下来是调用这个插件了
在终端cd 到你工程文件夹目录
输入命令
sudo ionic plugin add [插件所在的目录]
目录直接将你的[Map这个插件拖进去就而已了]
完成之后打开platforms中的iOS目录找到你的项目工程就可以看到你的插件安装成功了
在plugin文件夹中你会看到你所添加的插件cordoba-plugin-Map这个文件夹
此时 就是在js中调用了
<input type="button" onclick="getInfo()" value="地图">
<script>
function getInfo() {
Map.map(success);
function success(info) {
alert(info);
}
};
</script>
用cordova做地图定位，由于phonegap100上没有合适自己的插件，iOS的定位已经做好了，要是把它做成插件就好将结果调到H5界面上去了。于是捣鼓了一个多星期，终于将一个地图定位插件做好了。下面分享一下这个插件开发过程。
第一步，是在创建xcode工程 完成地图定位功能，实现功能后，并进行真机测试，达到自己想要的要求。
第二步，创建一些文件夹以及文件，文件夹结构如下图所示：
224439.png
这个插件我把它命名为Map, 里边包含src 和www两个文件夹。src这个文件夹主要是用来存放对应平台的原生工程文件。如果你需要使用安卓或者WP的支持也可以。我这里只做了iOS的。www，这个文件夹是一个js文件。
创建一个plugin.xml文件 和 Map.js文件
plugin.xml文件里边的内容：
<?xml version="1.0" encoding="UTF-8"?>
<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0"
id="cordova-plugin-Map"
version="1.1.1-dev">
<name>Map</name>
<description>Cordova Map Plugin</description>
<author>YT</author>
<license>Apache 2.0</license>
<keywords>cordova,QRCode</keywords>
<repo>https://git@github.com:OceanOver/QRCode.git</repo>
<js-module src="www/Map.js" name="Map">
<clobbers target="Map" />
</js-module>
<!-- ios -->
<platform name="ios">
<config-file target="config.xml" parent="/*">
<feature name="Map">
<param name="ios-package" value="CDVMap" />
</feature>
</config-file>
<header-file src="src/ios/CDVMap.h" />
<source-file src="src/ios/CDVMap.m" />
<header-file src="src/ios/LocationViewController.h" />
<source-file src="src/ios/LocationViewController.m" />
<framework src="CoreLocation.framework" />
<framework src="MapKit.framework" />
</platform>
</plugin>
注意：如果你的工程需要添加依赖库 必须卸载这里才可以，然后添加的时候就可以自动导入了。
CDVMap.h的代码，这个类继承自Cordova/CDVPlugin.h
//
// CDVMap.h
// HelloWorld
//
// Created by JUST-IMAC on 16/3/17.
//
//
#import <Cordova/CDVPlugin.h>
@interface CDVMap : CDVPlugin
- (void)map:(CDVInvokedUrlCommand*)command;
@end
//
// CDVMap.m
// HelloWorld
//
// Created by JUST-IMAC on 16/3/17.
//
//
CDVMap.m的代码
#import "CDVMap.h"
#import "LocationViewController.h"
@interface CDVMap ()
@end
@implementation CDVMap
- (void)map:(CDVInvokedUrlCommand*)command {
NSString *callBackId = command.callbackId;
//将callbackId;传入你的控制器中
LocationViewController *qrCodeController = [[LocationViewController alloc] init];
qrCodeController.callBackId = callBackId;
qrCodeController.qrCode = self;
//调用原生控制器
[self.viewController presentViewController:qrCodeController animated:YES completion:nil];
}
@end
LocationViewController.h的代码
//
// LocationViewController.h
// 系统地图定位
//
// Created by admin on 16/7/9.
// Copyright © 2016年 davidde. All rights reserved.
//
#import <UIKit/UIKit.h>
#import "CDVMap.h"
@interface LocationViewController : UIViewController
//这两个参数是必须的
@property(nonatomic,weak) CDVMap *qrCode;
@property(nonatomic,copy) NSString *callBackId;
@end
LocationViewController.m的代码
这里边的代码我就不贴了，
这里我需要在原生地图中获取得到的定位信息，传到h5界面中处理。
于是调用
Map.js里边的代码
665009B4-81FF-4646-BABF-0B8447B30A72.png
这里不需要上传到git,所以不需要做package.json文件里边的处理
到此一个插件已经基本上做好了
接下来是调用这个插件了
在终端cd 到你工程文件夹目录
输入命令
sudo ionic plugin add [插件所在的目录]
目录直接将你的[Map这个插件拖进去就而已了]
完成之后打开platforms中的iOS目录找到你的项目工程就可以看到你的插件安装成功了
在plugin文件夹中你会看到你所添加的插件cordoba-plugin-Map这个文件夹
此时 就是在js中调用了
<input type="button" onclick="getInfo()" value="地图">
<script>
function getInfo() {
Map.map(success);
function success(info) {
alert(info);
}
};
</script>
此时就可以成功调用了。如果你还需要修改你的插件，还可以在工程里边修改，这里就不做太多描述了。
网友评论