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 ...
随机推荐
- C# 操作IitextPdf
1.读取PDF内容 public string ReadPdfFile(string fileName) { StringBuilder text = new StringBuilder(); if ...
- C# 获取mp3文件的歌曲时间长度
添加命名空间: using Shell32; using System.Text.RegularExpressions;添加引用:COM组件的Microsoft Shell Control ...
- 003iptables 命令介绍
http://www.cnblogs.com/wangkangluo1/archive/2012/04/19/2457072.html iptables 防火墙可以用于创建过滤(filter)与NAT ...
- ELK简单使用
原作者:http://www.cnblogs.com/snidget/p/6269383.html ELK ELK是什么? Elasticsearch LogStash Kibana 1,简单 ...
- 窗口生效函数UpdateData
Invalidate()使整个窗口客户区无效.窗口的客户区无效意味着需要重绘,例如,如果一个被其它窗口遮住的窗口变成了前台窗口,那么原来被遮住的部分就是无效的,需要重绘.这时Windows会在应用程序 ...
- hdu 5895(矩阵快速幂+欧拉函数)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5895 f(n)=f(n-2)+2*f(n-1) f(n)*f(n-1)=f(n-2)*f(n-1)+2 ...
- csu 1503: 点到圆弧的距离
1503: 点到圆弧的距离 Time Limit: 1 Sec Memory Limit: 128 MB Special JudgeSubmit: 614 Solved: 101[Submit] ...
- 安装 jupyter notebook 出现 ModuleNotFoundError: No module named 'markupsafe._compat' 错误
使用 python -m pip install jupyter 安装完成 jupyter notebook 之后,在命令行界面输入 "jupyter notebook "指令打开 ...
- Intel Code Challenge Final Round (Div. 1 + Div. 2, Combined) E - Goods transportation 最大流转最小割转dp
E - Goods transportation 思路:这个最大流-> 最小割->dp好巧妙哦. #include<bits/stdc++.h> #define LL long ...
- Codeforces Round #496 (Div. 3) F - Berland and the Shortest Paths
F - Berland and the Shortest Paths 思路:还是很好想的,处理出来最短路径图,然后搜k个就好啦. #include<bits/stdc++.h> #defi ...