需求描述

项目中,要求接入导航功能,包括“百度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=%@,%@&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";

ReactNative-地图导航-iOS的更多相关文章

  1. iOS开发----调用地图导航

    注意:本文章下的代码有个别变量未知,所以是不能直接跑通的,我也是转别人的 在IOS6.0系统后,兼容iOS5.0与iOS6.0地图导航,需要分两个步骤 #define SYSTEM_VERSION_L ...

  2. iOS 调用地图导航

    在IOS6.0系统后,兼容iOS5.0与iOS6.0地图导航,需要分两个步骤 #define SYSTEM_VERSION_LESS_THAN(v) ([[[UIDevice currentDevic ...

  3. ios开发中如何调用苹果自带地图导航

    前段时间一直在赶项目,在外包公司工作就是命苦,天天加班不说,工作都是和工期合同挂钩的,稍微逾期就有可能被扣奖金,不谈这些伤脑筋的事情了,让我们说说iOS开发中如何调用苹果手机自带的地图. 学习如逆水行 ...

  4. iOS开发之百度地图导航

    本篇主要讲述百度地图的导航功能: 第一步:在使用百度导航之前,我们需要在百度地图开放平台上下载导航的 SDK,共85.8M,网速不好的同学可提前准备好. 第二步:引入导航所需的系统包 将AudioTo ...

  5. iOS打开百度地图、高德地图导航

    1.判断手机里是否已经安装了百度地图或者高德地图: BOOL hasBaiduMap = NO; BOOL hasGaodeMap = NO; if ([[UIApplication sharedAp ...

  6. IOS 手绘地图导航

    手绘地图导航 第三方库 NAMapKit, 1)支持在手绘图上标记.缩放 2)支持在单张图片 3)支持瓦片小图片 思路 前提:美工已经切好手绘图,并告知我们当前的缩放级别. 1)确定好手绘图左上角点在 ...

  7. iOS判断并使用百度地图 高德地图 导航 (使用URI,不集成sdk)

    [objc] view plaincopy  1. BOOL hasBaiduMap = NO;   2.         BOOL hasGaodeMap = NO;   3.            ...

  8. 天津政府应急系统之GIS一张图(arcgis api for flex)讲解(四)地图导航控件模块

    config.xml文件的配置如下: <widget left="10" top="50" config="widgets/Navigation ...

  9. Windows phone 8 学习笔记(8) 定位地图导航(转)

    Windows phone 8 已经不使用自家的bing地图,新地图控件可以指定制图模式.视图等.bing地图的定位误差比较大,在模拟器中测试新地图貌似比较理想.本节主要讲解下位置服务以及新地图控件的 ...

  10. 实现百度地图导航Demo的语音播报功能

    上文中实现了在本地导入百度地图导航Demo,那么在此基础上如何实现导航的语音播报呢? 一.为该应用申请语音播报(也叫注册) http://developer.baidu.com/map/index.p ...

随机推荐

  1. queue_delayed_work和queue_work区别 (转http://blog.csdn.net/dosculler/article/details/7968101)

    queue_delayed_work和queue_work 一.参考文献: 1)http://www.linuxidc.com/Linux/2011-08/41655.htm queue_delaye ...

  2. http状态码说明

    在学习网页设计的时候都应该知道状态码,但我们常见的状态码都是200,404,下面介绍其他的状态值 1开头的http状态码表示临时响应并需要请求者继续执行操作的状态代码. 100   (继续) 请求者应 ...

  3. [写出来才有价值系列:node.js]node.js 01-介绍及安装

    对于Node.js在百度百科上是这样解释的: Node.js是一个Javascript运行环境(runtime).实际上它是对Google V8引擎进行了封装.V8引 擎执行Javascript的速度 ...

  4. java在图片上写字

  5. git版本控制系统常见操作总结

    简介 Git是强大的版本控制系统,主要功能是针对代码.配置文件等文本进行版本控制.备份等,同时个人认为还是分发代码的一个不错的方式. 常见用法 #创建远程git仓库 [root@test88 ~]# ...

  6. mysql军规

    总是在灾难发生后,才想起容灾的重要性.总是在吃过亏后,才记得曾经有人提醒过. 一,核心军规 不在数据库做计算,cpu计算务必移至业务层 控制单表数据量,单表记录控制在千万级 控制列数量,字段数控制在2 ...

  7. Vue进阶篇

    前引 今天是2018年12月30,虽不是2018年的最后一天,但是却是自己在2018年写的最后一篇博客了,昨天下班在地铁上闲来无事,翻起了关注的一些公众号发的技术博文,里面就提到写博客的重要性,其实这 ...

  8. 洛谷P1789【Mc生存】插火把 题解

    题目传送门 这道题目可以纯暴力: #include<bits/stdc++.h> //Minecraft 666 using namespace std; ][]; int n,m,k,a ...

  9. CSS3–2.css3 响应式布局

    1.响应式布局 响应式布局是现在很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案.所谓的响应式布局,就是一个网站 ...

  10. JS循环、数组与练习题

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...