ReactNative實作地圖導航

相關源碼

同志們好，我又回歸了，本來是想分享Flutter相關的内容，但是好久不寫文章，感覺生疏了不少，不知道從何處下筆了，所有就把草稿箱躺了快一年的内容整理一下，分享分享。這篇文章是使用最簡單的方式實作地圖導航的需求，那就是通過喚起手機中的導航類軟體進行導航，是以你想在應用内實作導航以及定制導航路線，那就可以到此為止了（如果有應用内導航需求或者線路規劃需求的，留言，我可以寫個底層的插件（android端，此時需要有個寫ios底層合作的了）。 很多人都認為喚起導航軟體進行導航，需要底層去寫實作，其實大可不必，通過ReactNative自帶的一些Api就可以實作我們想要的效果了。

Linking

Linking是RN中APP之間跳轉互動的Api接口，并且能解析其中攜帶的參數資料。

• getInitialURL 當我們的應用被其它應用注冊喚醒，我們就可以通過它進行一些邏輯的處理，底層App喚醒的一些配置就不介紹了android 可前往developer.android.com/training/ap… 檢視，ios自行搜尋。這種需求在很多企業内多個應用直接經常會用到，在RN中使用很簡單，隻需要在首頁元件的componentDidMount方法中注冊就可以了，當然，官方文檔中也有說明，在任何元件都可以擷取到url參數。

componentDidMount() {
  Linking.getInitialURL().then((url) => {
    if (url) {
//可以根據url寫跳轉到相應的頁面的邏輯和參數
      console.log('Initial url is: ' + url);
    }
  }).catch(err => console.error('An error occurred', err));
}
複制代碼
           

• openURL 這個方法其實就是我們這篇文章的實作最重要的方法之一了，我們就可以通過他來打開第三方的App,下面列舉幾個常見的使用

Linking.openURL(url).catch(err => console.error('An error occurred', err));

//如打開浏覽器通路
Linking.openURL("https://github.com/xiehui999")
//撥打電話
Linking.openURL("tel:[phone]")
//發送短信
Linking.openURL("smsto:10086")
複制代碼
           

需要注意的是，在ios9.0及以上需要配置LSApplicationQueriesSchemes，否則調用無效。

• canOpenURL 很多時候我們需要先判斷判斷裝置上是否有已經安裝的應用可以處理指定的 URL，該方法就可實作此功能，ios9需要配置LSApplicationQueriesSchemes，否則會一直傳回false.

百度

• url

baidumap://map/direction?origin=latlng:34.264642646862,108.95108518068|name:我家&destination=大雁塔&mode=driving&region=西安&output=html&src=webapp.baidu.openAPIdemo
//調起百度PC或Web地圖，展示"西安市"從（lat:34.264642646862,lng:108.95108518068 ）"我家"到"大雁塔"的駕車路線。
複制代碼
           

origin是必填項，後更導航起始點經緯度，name是導航地圖顯示的marker提示資訊。destination是導航終點的經緯度或者名稱。 mode指定導航路線的方法包括可選transit（公交）、driving（駕車）、walking（步行）和riding（騎行）(ios多個navigation)。根據自己的需求使用 其它具體參數可檢視百度官方文檔

高德

喚起高德地圖規劃線路的url字首略有不同，基本内容還是一樣的

//Android
amapuri://route/plan/?
//iOS
iosamap://path?

//後面追加内容
sourceApplication=test&slat=39.92848272&slon=116.39560823&sname=A&dlat=39.98848272&dlon=116.47560823&dname=B&dev=0&t=0
複制代碼
           

s開通的表示起點資訊，不填預設目前位置，d開頭的為終點資訊，t為導航規劃路線的方式 t = 0（駕車）= 1（公交）= 2（步行）= 3（騎行）= 4（火車）= 5（長途客車）

騰訊

qqmap://map/routeplan?type=drive&from=清華&fromcoord=39.994745,116.247282&to=怡和世家&tocoord=39.867192,116.493187&referer=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77
複制代碼
           

type路徑規劃方式，路線規劃方式參數：分别為公交：bus ，駕車：drive ，步行：walk ，騎行：bike，from 開頭的為起點資訊，to開頭的為終點資訊，需要注意的是referer參數，官方文檔說該參數為申請的騰訊地圖的開發key.

通過上面的分析，我們就可以實作導航了，下面我們就簡單的封裝一下一個導航的工具類，包括三個判斷是否安裝相應地圖軟體的方法，和相應打開地圖導航的方法

static isInstallAmap = () => {
        return new Promise((resolve, reject) => {
            Linking.canOpenURL(Platform.OS === "android" ? "amapuri://route/plan/" : "iosamap://path").then(supported => {
                resolve(supported)
            }).catch(resolve(false))
        })
    }
 /**
     * 打開高德地圖導航
     * @param {String} data.sname - 起點名字.
     * @param {String|number} data.slon - 起點經度.
     * @param {String|number} data.slat - 起點緯度.
     * @param {String} data.dname - 終點名字.
     * @param {String|number} data.dlon - 終點經度.
     * @param {String|number} data.dlat - 終點緯度.
     * @param{Mode} data.mode 導航類型
     * @param data
     */
   static openAmap = (data = {}) => {
        let base = Platform.OS === "android" ? "amapuri://route/plan/？" : "iosamap://path？"
        return new Promise((resolve, reject) => {
            //起點經緯度不傳，則自動将使用者目前位置設為起點
            if (!data.dlat || !data.dlon) {
                resolve("需要終點經緯度")
            } else {

                if (data.slon && data.slat) {
                    base += `&slat=${data.slat}&slon=${data.slon}`
                }
                if (data.sname) {
                    base += `&sname=${data.sname}`
                }
                if (data.dname) {
                    base += `&dname=${data.dname}`
                }
                base += `&dlat=${data.dlat}&dlon=${data.dlon}&dev=0&t=${data.mode ? (data.mode.amap || 0) : 0}`
                Linking.openURL(base).then(res => {

                }).catch(err => {
                    reject("暫無安裝高德地圖")
                })
            }
        });
    }
複制代碼
           

上面我貼出了一個判斷安裝和一個喚起軟體導航的方法，其它幾種按此實作即可，當然我也把整理好的檔案上傳到GitHub了，具體細節可以前往RoutePlan檔案,使用demo可前往RoutePlanExample檔案，可以直接下載下傳demo。