ReactNative 调用手机地图（高德百度）导航 Android _reactnative

时人不识凌云木，直待凌云始道高。这篇文章主要讲述ReactNative 调用手机地图（高德百度）导航 Android相关的知识，希望能为你提供帮助。
由于项目需要，鉴于第三方sdk包的体积略大，经过评估论证后，决定采用调起APP以及网页地图的方式来进行导航。
【ReactNative 调用手机地图（高德百度）导航 Android】
思路：在需要调用导航的界面通过原生获取当前手机内可用的导航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)); }

View Code2、选择地图，打开导航：

文章图片

/** * @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 = https://www.songbingjia.com/android/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& region=%s& mode=driving& output=html& src=https://www.songbingjia.com/android/%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)); } }

View Code
其中辅助检查方法为：

文章图片

1/** 2* 检查手机上是否安装了指定的软件 3* 4* @param context 5* @param packageName 6*应用包名 7* @return 8*/ 9private static boolean isAvailable(Context context, String packageName) { 10final PackageManager packageManager = context.getPackageManager(); 11 12// 获取所有已安装程序的包信息 13List< PackageInfo> packageInfos = packageManager.getInstalledPackages(0); 14 15// 用于存储所有已安装程序的包名 16List< String> packageNames = new ArrayList< > (); 17 18// 从pinfo中将包名字逐一取出，压入pName list中 19if (packageInfos != null) { 20for (int i = 0; i < packageInfos.size(); i++) { 21String packName = packageInfos.get(i).packageName; 22packageNames.add(packName); 23} 24} 25 26// 判断packageNames中是否有目标程序的包名，有TRUE，没有FALSE 27return packageNames.contains(packageName); 28}

检查手机上是否安装了指定的软件
然后在RN界面显示列表调用代码即可。