ReactNative 调用手机地图(高德、百度)导航 Android
由于项目需要,鉴于第三方sdk包的体积略大,经过评估论证后,决定采用调起APP以及网页地图的方式来进行导航。
思路:
在需要调用导航的界面通过原生获取当前手机内可用的导航app组装成列表返回到RN待选择调用,如果没有安装任何APP,则直接请求浏览器打开web版百度地图。需要注意的是,这里笔者选择百度定位sdk取得坐标,然后通过高德在线服务将百度坐标转换为高德坐标。
集成:
1、获取可用的地图列表:
/**
* 百度地图包名
*/
public static final String PACKAGE_NAME_BD_MAP = "com.baidu.BaiduMap"; /**
* 高德地图包名
*/
public static final String PACKAGE_NAME_MINI_MAP = "com.autonavi.minimap"; @ReactMethod
public void getAvailableMapNames(final Callback callback) {
Map<String, String> names = new HashMap(); if (isAvailable(this.getCurrentActivity(), PACKAGE_NAME_BD_MAP)) {
names.put(PACKAGE_NAME_BD_MAP, "百度地图");
} if (isAvailable(this.getCurrentActivity(), PACKAGE_NAME_MINI_MAP)) {
names.put(PACKAGE_NAME_MINI_MAP, "高德地图");
} callback.invoke(JsonHelper.toJSONString(names));
}
2、选择地图,打开导航:
/**
* @param pkgName
* @param param
*/
@ReactMethod
public void openNavMap(String pkgName, String param, final Callback callback) {
if (isBlank(param)) {
ResponseModel responseModel = new ResponseModel();
responseModel.setErrmsg("参数为空");
callback.invoke(JsonHelper.toJSONString(responseModel));
return;
} try {
JSONObject data = new JSONObject(param);
String originLat = data.get("originLat").toString();
String originLng = data.get("originLng").toString(); String destLat = data.get("destLat").toString();
String destLng = data.get("destLng").toString(); if (isBlank(pkgName)) {
// http://lbsyun.baidu.com/index.php?title=uri/api/web
String url = "http://api.map.baidu.com/direction?origin=%s,%s&destination=%s,%s®ion=%s&mode=driving&output=html&src=%s";
// 打开网页
Intent intent = new Intent();
intent.setAction("android.intent.action.VIEW");
Uri contentUrl = Uri.parse(String.format(url, originLat, originLng, destLat, destLng, this.getName(),
this.getName()));
intent.setData(contentUrl);
this.getCurrentActivity().startActivity(intent);
return;
} String tmpName = pkgName.trim();
if (tmpName.equals(PACKAGE_NAME_BD_MAP)) {
Intent i1 = new Intent();
// 驾车导航
i1.setData(Uri.parse(String.format("baidumap://map/navi?location=%s,%s", destLat, destLng)));
this.getCurrentActivity().startActivity(i1);
} else if (tmpName.equals(PACKAGE_NAME_MINI_MAP)) {
// http://lbs.amap.com/api/amap-mobile/guide/android/navigation
StringBuffer scheme = new StringBuffer("androidamap://navi?sourceApplication=").append(this.getName());
// if (!TextUtils.isEmpty(poiname)){
// stringBuffer.append("&poiname=").append(poiname);
// } // dev 必填 是否偏移(0:lat 和 lon 是已经加密后的,不需要国测加密; 1:需要国测加密)
// style 必填 导航方式(0 速度快; 1 费用少; 2 路程短; 3 不走高速;4 躲避拥堵;5
// 不走高速且避免收费;6 不走高速且躲避拥堵;7 躲避收费和拥堵;8 不走高速躲避收费和拥堵))
scheme.append("&lat=").append(destLat).append("&lon=").append(destLng).append("&dev=").append(0)
.append("&style=").append(0); Intent intent = new Intent("android.intent.action.VIEW", Uri.parse(scheme.toString()));
intent.setPackage("com.autonavi.minimap");
this.getCurrentActivity().startActivity(intent);
}
} catch (JSONException e) {
e.printStackTrace(); ResponseModel responseModel = new ResponseModel();
responseModel.setErrmsg("数据解析错误");
callback.invoke(JsonHelper.toJSONString(responseModel));
}
}
其中辅助检查方法为:
/**
* 检查手机上是否安装了指定的软件
*
* @param context
* @param packageName
* 应用包名
* @return
*/
private static boolean isAvailable(Context context, String packageName) {
final PackageManager packageManager = context.getPackageManager(); // 获取所有已安装程序的包信息
List<PackageInfo> packageInfos = packageManager.getInstalledPackages(0); // 用于存储所有已安装程序的包名
List<String> packageNames = new ArrayList<>(); // 从pinfo中将包名字逐一取出,压入pName list中
if (packageInfos != null) {
for (int i = 0; i < packageInfos.size(); i++) {
String packName = packageInfos.get(i).packageName;
packageNames.add(packName);
}
} // 判断packageNames中是否有目标程序的包名,有TRUE,没有FALSE
return packageNames.contains(packageName);
}
检查手机上是否安装了指定的软件
然后在RN界面显示列表调用代码即可。
ReactNative 调用手机地图(高德、百度)导航 Android的更多相关文章
- Android 调用手机上第三方百度地图并传值给地图
//移动APP调起Android百度地图方式举例 Intent intent = null; try { // intent = Intent.getIntent("intent://map ...
- Android开发 PopupWindow弹窗调用第三方地图(百度,高德)实现导航功能
博客描述:后台返回地点的经纬度在地图上进行描点,点击导航弹出PopupWindow进行选择地图操作,如果手机中没有安装地图,提示没有,否则传值调起地图进行导航操作 看一下实现的效果,没图说再多都白搭 ...
- iOS 在 程序内调用手机上安装的地图软件进行导航
// 需求是需要用户 能从 所在位置 到 附近的健身房的 路线, 然而,就一个需求,不值当的添加一个地图, 就用调用手机上第三方地图软件, 什么高德, 百度, 腾讯, iOS 原生地图都可以, 如果 ...
- 百度导航试用 vs 高德导航
听说百度导航免费了,下载试用了一下: HUD模式不错,但是需要一个手机支架或挂钩.尤其是HUD景象模式,夜间把手机平放,通过前挡风玻璃反射看.这个功能有点乔布斯的感觉了. 不过路径规划还差一点,和凯立 ...
- 高德地图测两点距离android比较精确的
/////参考资料:高德官方:[http://lbs.amap.com/api/android-location-sdk/guide/android-location/getlocation] 主要三 ...
- GPS定位为什么要转换处理?高德地图和百度地图坐标处理有什么不一样?
GPS定位为什么要转换处理?高德地图和百度地图坐标处理有什么不一样? 先了解一下 高德地图 采用: GCJ-02 (不可逆) 百度百科: http://baike.baidu.com/link?url ...
- 用手机地图GPS导航费流量吗?
如果你的手机带有GPS芯片,那么使用手机导航是不会耗费手机流量的.但是如果你的手机没有GPS芯片,而使用的导航软件又是类似于移动提供的导航服务那样的导航功能,那就耗费手机流量了. 目前,导航软件导航主 ...
- Windows Store Javascript项目使用高德地图、谷歌地图、百度地图API
原文 Windows Store Javascript项目使用高德地图.谷歌地图.百度地图API 在Win8 Store 项目中可以使用的地图主要有微软的Bing Map,目前高德地图sdk也支持Wi ...
- iOS 调用第三方地图进行导航
//支持的地图 { _model = model; //支持的地图 NSMutableArray *maps = [NSMutableArray array]; //苹果原生地图-苹果原生地图方法和其 ...
随机推荐
- Xcode 9安装
Xcode 9 Xcode 9 Compatibility Xcode 9 requires a Mac running macOS 10.13.2 or later. Xcode 9 include ...
- 一款线程安全、基本功能齐全的STL
MiniSTL 目前正在完成一个STL,主要想通过该项目锻炼C++编程.模板编程.熟悉STL.锻炼数据结构和算法能力. 项目的目标是实现STL的几大构件+线程安全.项目过程中主要参考SGI STL源码 ...
- 宋牧春: Linux设备树文件结构与解析深度分析(1) 【转】
转自:https://mp.weixin.qq.com/s/OX-aXd5MYlE_YoZ3p32qWA 作者简介 宋牧春,linux内核爱好者,喜欢阅读各种开源代码(uboot.linux.ucos ...
- Workqueue机制的实现
Workqueue机制中定义了两个重要的数据结构,分析如下: cpu_workqueue_struct结构.该结构将CPU和内核线程进行了绑定.在创建workqueue的过程中,Linux根据当前系统 ...
- MySQL删除数据几种情况以及是否释放磁盘空间【转】
MySQL删除数据几种情况以及是否释放磁盘空间: 1.drop table table_name 立刻释放磁盘空间 ,不管是 Innodb和MyISAM ; 2.truncate table tabl ...
- /proc/sys 子目录的作用
该子目录的作用是报告各种不同的内核参数,并让您能交互地更改其中的某些.与 /proc 中所有其他文件不同,该目录中的某些文件可以写入,不过这仅针对 root. 其中的目录以及文件的详细列表将占据过多的 ...
- scikit-learn模块学习笔记(数据预处理模块preprocessing)
本篇文章主要简单介绍sklearn中的数据预处理preprocessing模块,它可以对数据进行标准化.preprocessing 模块提供了数据预处理函数和预处理类,预处理类主要是为了方便添加到pi ...
- caffe多个gpu数据合并到一起
当多GPU树形拓扑构建完毕,数据预缓冲到GPU显存,开始进入多GPU并行训练.Caffe的Solver提供了两个用于多GPU训练的回调函数:on_start()和on_gradient_ready() ...
- Android学习笔记(三) UI布局
每一个布局都有其适合的方式,另外,这几个布局元素可以相互嵌套应用,做出美观的界面. 一.线性布局(LinearLayout) 线性布局,这个东西,从外框上可以理解为一个div,他首先是一个一个从上往下 ...
- MQTT协议以及库函数说明
内容简介:之前我们写了一篇ESP8266AT指令的说明文档,在客户端连接上服务器之后,接下来便是网络通信.为此我们又写了这一片MQTT协议的说明文档,更加深层次的讲述了通信的原理.此文档只是我们在调试 ...