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:2];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=%@,%@&region=%@&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";

转载于:https://www.cnblogs.com/univalsoft-mobile-team/p/7636658.html

ReactNative-地图导航-iOS相关推荐

ReactNative实现地图导航
相关源码同志们好,我又回归了,本来是想分享Flutter相关的内容,但是好久不写文章,感觉生疏了不少,不知道从何处下笔了,所有就把草稿箱躺了快一年的内容整理一下,分享分享.这篇文章是使用最简单的方式 ...
iOS 调用地图导航
在IOS6.0系统后,兼容iOS5.0与iOS6.0地图导航,需要分两个步骤 #define SYSTEM_VERSION_LESS_THAN(v) ([[[UIDevice currentDevic ...
ios开发中如何调用苹果自带地图导航
前段时间一直在赶项目,在外包公司工作就是命苦,天天加班不说,工作都是和工期合同挂钩的,稍微逾期就有可能被扣奖金,不谈这些伤脑筋的事情了,让我们说说iOS开发中如何调用苹果手机自带的地图. 学习如逆水行 ...
react-native调起第三方高德地图导航URL解释
react-native调起第三方高德地图导航URL解释做react-native地图应用时,主要使用的是高德地图,所以在导航上也准备调起高德地图应用来完成导航功能,在高德地图API官网并没有发现高 ...
ios百度导航SDK，iOS开发之百度地图导航
若遇到疑难问题可以去 ios导航SDK 论坛问题查看和反馈:http://bbs.lbsyun.baidu.com/forum.php?mod=forumdisplay&fid=37 ...
iOS Swift 应用内跳转第三方地图导航路线及地图坐标系转换
支持百度谷歌高德苹果腾讯地图一键打开及地图之间的坐标系的转换本项目 Demo 下载地址 https://github.com/sinorychan/JumpToThirdMap 注意 ...
iOS 地图导航路线规划详解
虽然是转载的,还是说几句吧.网上百度地图导航路线规划倒是挺多的,苹果自带的高德导航确实挺少,研究了好久发现就这个讲的稍微全一点,把需要用到的类什么的都讲清楚了.不过高德有个方法可以跳转到它自己的地图上 ...
IOS 手绘地图导航
手绘地图导航第三方库 NAMapKit, 1)支持在手绘图上标记.缩放 2)支持在单张图片 3)支持瓦片小图片思路前提:美工已经切好手绘图,并告知我们当前的缩放级别. 1)确定好手绘图左上角点在 ...
百度地图no result available_【整理之路二】百度地图的路径规划和调用本机地图导航...
推荐看完之后注意一下最后的东西一.细说百度地图的路径规划路径规划主要有这么几种 1.公交路径规划 1.1 市内公交规划(暂时不在这里说) 1.2 跨市/省公交规划 // 导入头文件 #import ...
[Swift]地图导航
如图,先在白名单(LSApplicationQueriesSchemes)中添加需要支持的地图(comgooglemaps.qqmap.baidumap.iosamap). 使用时传起点位置.终点位置 ...