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 ...
随机推荐
- Linux系统中提示/usr/bin/ld: cannot find -lxxx错误的通用解决方法
在linux环境编译应用程式或lib的source code时常常会出现如下的错误讯息: 代码如下: /usr/bin/ld: cannot find -lxxx 这些讯息会随着编译不同类型的sour ...
- java 1.8 新特性 stream
并发提升 java 中Stream类似于hadoop中的数据分析的思路,只不过hadoop大,用的是多台机算机的计算生态,而java stream使用的单台计算机中的多cpu分析一块数据的过程.通过 ...
- 转:google测试分享-SET和TE
原文: http://blog.sina.com.cn/s/blog_6cf812be0102vbnb.html 前端时间看了google测试之道,收获了一些,在此总结下并打算写一个系列blog,顺 ...
- python 面试
知识总结 面试(一)
- HDU 3018 Ant Trip (并查集求连通块数+欧拉回路)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3018 题目大意:有n个点,m条边,人们希望走完所有的路,且每条道路只能走一遍.至少要将人们分成几组. ...
- 机顶盒 gettimeofday()获取毫秒溢出
最近在写代码的时候遇见了一个bug,在获取当前时间戳的毫秒时,我自己测试的时候总是OK的,但是测试那边总是测不对,之前一直以为是因为我存储的类型的不对,从long long类型从lld改成llu,然后 ...
- 问候Maven3(笔记一)
第一节:Maven 简介 百度百科:Maven 官网:http://maven.apache.org/ 第二节:Maven 安装与配置 Maven 下载:http://maven.apache.org ...
- js + -操作符
js + 举例说明最有效了... "11"+1='111' "11"+'1'="111" 11+1=12 大概的感觉就是+操作符会优先输入S ...
- LeetCode312. Burst Balloons
Given n balloons, indexed from 0 to n-1. Each balloon is painted with a number on it represented by ...
- open()函数文件操作
open函数,该函数用于文件处理 操作文件时,一般需要经历如下步骤: (1)打开文件 (2)操作文件 一.打开文件 文件句柄 = open("文件路径","模式& ...