ReactNative-地图导航-iOS
需求描述
项目中,要求接入导航功能,包括“百度map、高德map”。
方案分析
原生开发角度分析
从原生开发的角度分析的话,常规的思路可能是
- 分别取百度、高德官网,下载对应的SDK然后集成到本地;
- 创建对应的MapView,参照文档完成导航功能;
- MapView对外开放参数,由调用者传入,MapView内部利用参数,最终实现导航
- MapView提供【退出】操作
也可以是这样
- 分别取百度、高德官网,查看调起“百度地图APP、高德地图APP”的方法;
- 创建MapViewTools工具类,参照文档写好调用方法;
- MapViewTools对外开放参数,由调用者传入,MapViewTools内部使用参数,最终调起地图APP,实现导航;
RN开发角度分析
如果是SDK方式集成的话,首先需要native原生集成,然后编写RN视图组件,最后回到RN工程完成调用。
- 好处:从此以后有了地图轮子;
- 坏处:需要跟随官方地图进行大版本的升级维护,此外APP体积会变大
如果是调起APP方式集成的话,还是需要native提供方法,然后编写RN接口组件,最后回到RN工程完成调用。
- 好处:从此以后有了地图轮子,APP体积几乎不变,也不用过多的关心官方版本,除非参数发生了变化;
- 坏处:两个APP来回切换,体验上会有那么一丢丢的不连贯
结论:采用调起APP的方式进行集成
集成过程(iOS)
创建RN接口组件NRJMap
接口一:获取可用的导航方式
RCT_EXPORT_METHOD(getAvailableMapNames:(RCTResponseSenderBlock)callback)
{
BOOL isBaiduMap = [[UIApplication sharedApplication] canOpenURL:[NSURL URLWithString:@"baidumap://"]];
BOOL isAMap = [[UIApplication sharedApplication] canOpenURL:[NSURL URLWithString:@"iosamap://"]]; NSMutableDictionary *result = [NSMutableDictionary dictionaryWithCapacity:];
if (isBaiduMap) {
[result setValue:@"百度地图" forKey:kBaiduMap];
} if (isAMap) {
[result setValue:@"高德地图" forKey:kGaodeMap];
} dispatch_async(dispatch_get_main_queue(), ^{
callback(@[[result mj_JSONString]]);
});
}
接口二:开启导航
RCT_EXPORT_METHOD(openNavMap:(NSString *)map param:(NSString *)aParam callback:(RCTResponseSenderBlock)callback)
{
NSDictionary *param = [aParam mj_JSONObject];
// 百度地图
if ([map isEqualToString:kBaiduMap]) {
// 打开百度地图
NSString *url = [[NSString stringWithFormat:@"baidumap://map/direction?origin=latlng:%@,%@|name:我的位置&destination=latlng:%@,%@|name:%@&mode=driving",
param[@"originLat"],
param[@"originLng"],
param[@"destLat"],
param[@"destLng"],
param[@"dest"]] stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding]; if ([[UIApplication sharedApplication] canOpenURL:[NSURL URLWithString:@"baidumap://map/"]]) {
if ([[UIApplication sharedApplication] openURL:[NSURL URLWithString:url]] == NO) {
dispatch_async(dispatch_get_main_queue(), ^{
[FEHudManager showPopMessage:@"无法打开百度地图"];
});
}
}
else {
dispatch_async(dispatch_get_main_queue(), ^{
[FEHudManager showPopMessage:@"无法打开百度地图"];
});
}
} // 高德地图
else if ([map isEqualToString:kGaodeMap]) {
NSString *url = [[NSString stringWithFormat:@"iosamap://navi?sourceApplication=%@&poiname=%@&lat=%@&lon=%@&dev=1&style=2",@"app名称",@"目的地", param[@"destLat"],param[@"destLng"]] stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
if ([[UIApplication sharedApplication]canOpenURL:[NSURL URLWithString:@"iosamap://"]]){ if ([[UIApplication sharedApplication] openURL:[NSURL URLWithString:url]] == NO) {
dispatch_async(dispatch_get_main_queue(), ^{
[FEHudManager showPopMessage:@"无法打开高德地图"];
});
}
}
else {
dispatch_async(dispatch_get_main_queue(), ^{
[FEHudManager showPopMessage:@"无法打开高德地图"];
});
}
} // 网页版百度导航
else { NSString *url = [NSString stringWithFormat:@"http://api.map.baidu.com/direction?origin=%@,%@&destination=%@,%@®ion=%@&mode=driving&output=html&src=%@",
param[@"originLat"],
param[@"originLng"],
param[@"destLat"],
param[@"destLng"],
@"s",@"WeiJiSMD"];
[[UIApplication sharedApplication] openURL:[NSURL URLWithString:url]]; }
}
其中两个常量的定义如下
static NSString *kBaiduMap = @"com.baidu.BaiduMap";
static NSString *kGaodeMap = @"com.autonavi.minimap";
ReactNative-地图导航-iOS的更多相关文章
- iOS开发----调用地图导航
注意:本文章下的代码有个别变量未知,所以是不能直接跑通的,我也是转别人的 在IOS6.0系统后,兼容iOS5.0与iOS6.0地图导航,需要分两个步骤 #define SYSTEM_VERSION_L ...
- iOS 调用地图导航
在IOS6.0系统后,兼容iOS5.0与iOS6.0地图导航,需要分两个步骤 #define SYSTEM_VERSION_LESS_THAN(v) ([[[UIDevice currentDevic ...
- ios开发中如何调用苹果自带地图导航
前段时间一直在赶项目,在外包公司工作就是命苦,天天加班不说,工作都是和工期合同挂钩的,稍微逾期就有可能被扣奖金,不谈这些伤脑筋的事情了,让我们说说iOS开发中如何调用苹果手机自带的地图. 学习如逆水行 ...
- iOS开发之百度地图导航
本篇主要讲述百度地图的导航功能: 第一步:在使用百度导航之前,我们需要在百度地图开放平台上下载导航的 SDK,共85.8M,网速不好的同学可提前准备好. 第二步:引入导航所需的系统包 将AudioTo ...
- iOS打开百度地图、高德地图导航
1.判断手机里是否已经安装了百度地图或者高德地图: BOOL hasBaiduMap = NO; BOOL hasGaodeMap = NO; if ([[UIApplication sharedAp ...
- IOS 手绘地图导航
手绘地图导航 第三方库 NAMapKit, 1)支持在手绘图上标记.缩放 2)支持在单张图片 3)支持瓦片小图片 思路 前提:美工已经切好手绘图,并告知我们当前的缩放级别. 1)确定好手绘图左上角点在 ...
- iOS判断并使用百度地图 高德地图 导航 (使用URI,不集成sdk)
[objc] view plaincopy 1. BOOL hasBaiduMap = NO; 2. BOOL hasGaodeMap = NO; 3. ...
- 天津政府应急系统之GIS一张图(arcgis api for flex)讲解(四)地图导航控件模块
config.xml文件的配置如下: <widget left="10" top="50" config="widgets/Navigation ...
- Windows phone 8 学习笔记(8) 定位地图导航(转)
Windows phone 8 已经不使用自家的bing地图,新地图控件可以指定制图模式.视图等.bing地图的定位误差比较大,在模拟器中测试新地图貌似比较理想.本节主要讲解下位置服务以及新地图控件的 ...
- 实现百度地图导航Demo的语音播报功能
上文中实现了在本地导入百度地图导航Demo,那么在此基础上如何实现导航的语音播报呢? 一.为该应用申请语音播报(也叫注册) http://developer.baidu.com/map/index.p ...
随机推荐
- LCD常用接口原理【转】
转自:http://blog.csdn.net/wocao1226/article/details/23870149 LCD常用接口原理 点击打开链接 点击打开链接 点击打开链接 点击打开链接 点击打 ...
- shell编程===执行shell脚本的四种方法
使用vim创建一个shell文件,命名 hello.sh #!/bin/bash echo "hello shell !" 在linux中进行加载 chmod +x ./hello ...
- 64.Minimum Path Sum---dp
题目链接:https://leetcode.com/problems/minimum-path-sum/description/ 题目大意:从左上到右下的路径中,找出路径和最小的路径(与62,63题相 ...
- python代码这样写会更优雅
1.链式比较操作 age = 18 if age > 18 and age < 60: print("young man") pythonic if 18 < a ...
- 理解一条语句:SELECT difference(sum("value")) FROM "mq_enqueue" WHERE "channel" =~ /ActiveMQ_TEST/ AND $timeFilter GROUP BY time($interval)
最近使用grafana在查询InfluxDB中,用到了这一条语句 SELECT difference(sum("value")) FROM "mq_enqueue&quo ...
- EL(表达式)语言的几种运算符
1.EL的基本语法 (1)EL表达式语法:以${开头,以}结束,中间为合法的表达式,具体语法格式如下: ${expression} (2)参数说明:Expression:指定要输出的内容,可以是字符串 ...
- PHP学习笔记之数组游标操作
数组有N个单元,同时只能操作一个单元.比如循环时,只能一个一个单元读取他的值. 那么数组是怎么记住刚才读取的是哪个单元,接着读取下个单元的呢? 在数组内部,有一个指针,指针指向某一个单元. 每循环一个 ...
- HDU 2894 DeBruijin (数位欧拉)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2894 题目大意:旋转鼓的表面分成m块扇形,如图所示(m=8).图中阴影区表示用导电材料制成,空白区用绝 ...
- python之pandas&&DataFrame(二)
简单操作 Python-层次聚类-Hierarchical clustering >>> data = pd.Series(np.random.randn(10),index=[[' ...
- hdu 5202(DFS)
Rikka with string Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others ...