ReactNative實現地圖導航

時間 2019-11-29

標籤 reactnative 實現地圖導航简体版

原文原文鏈接

Linking

Linking是RN中APP之間跳轉交互的Api接口，而且能解析其中攜帶的參數數據。html

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:1008611")
//發送短信
Linking.openURL("smsto:10086")
複製代碼

須要注意的是，在ios9.0及以上須要配置LSApplicationQueriesSchemes，不然調用無效。react

canOpenURL 不少時候咱們須要先判斷判斷設備上是否有已經安裝的應用能夠處理指定的 URL，該方法就可實現此功能，ios9須要配置LSApplicationQueriesSchemes，不然會一直返回false.

百度

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)。根據本身的需求使用其它具體參數可查看百度官方文檔android

高德

喚起高德地圖規劃線路的url前綴略有不一樣，基本內容仍是同樣的ios

//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（長途客車）git

騰訊

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.github

經過上面的分析，咱們就能夠實現導航了，下面咱們就簡單的封裝一下一個導航的工具類，包括三個判斷是否安裝相應地圖軟件的方法，和相應打開地圖導航的方法web

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("暫無安裝高德地圖")
                })
            }
        });
    }
複製代碼