ReactNative 調用手機地圖(高德、百度)導航 Android

來源:互聯網
上載者:User

標籤:obj   xtu   輔助   i++   ble   code   應用   get   size   

由於項目需要,鑒於第三方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));    }
View Code

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));        }    }
View Code

 

其中輔助檢查方法為:

 

 1     /** 2      * 檢查手機上是否安裝了指定的軟體 3      *  4      * @param context 5      * @param packageName 6      *            應用程式套件名 7      * @return 8      */ 9     private static boolean isAvailable(Context context, String packageName) {10         final PackageManager packageManager = context.getPackageManager();11 12         // 擷取所有已安裝程式的包資訊13         List<PackageInfo> packageInfos = packageManager.getInstalledPackages(0);14 15         // 用於儲存所有已安裝程式的包名16         List<String> packageNames = new ArrayList<>();17 18         // 從pinfo中將包名字逐一取出,壓入pName list中19         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 26         // 判斷packageNames中是否有目標程式的包名,有TRUE,沒有FALSE27         return packageNames.contains(packageName);28     }
檢查手機上是否安裝了指定的軟體

 

然後在RN介面顯示列表調用代碼即可。

 

 

ReactNative 調用手機地圖(高德、百度)導航 Android

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.