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&region=%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)); } }

 

其中輔助檢查方法為：

 

    /**
 * 檢查手機上是否安裝了指定的軟件  3  *  4  * @param context  5  * @param packageName  6  * 應用包名  7  * @return
     */
    private static boolean isAvailable(Context context, String packageName) { 10         final PackageManager packageManager = context.getPackageManager(); 11 
        // 獲取所有已安裝程序的包信息
        List<PackageInfo> packageInfos = packageManager.getInstalledPackages(0); 14 
        // 用於存儲所有已安裝程序的包名
        List<String> packageNames = new ArrayList<>(); 17 
        // 從pinfo中將包名字逐一取出，壓入pName list中
        if (packageInfos != null) { 20             for (int i = 0; i < packageInfos.size(); i++) { 21                 String packName = packageInfos.get(i).packageName; 22  packageNames.add(packName); 23  } 24  } 25 
        // 判斷packageNames中是否有目標程序的包名，有TRUE，沒有FALSE
        return packageNames.contains(packageName); 28     }

 

然后在RN界面顯示列表調用代碼即可。