ReactNative實現地圖導航

ReactNative · 發表 2018-12-18 00:46:23

摘要：相關原始碼同志們好，我又迴歸了，本來是想分享Flutter相關的內容，但是好久不寫文章，感覺生疏了不少，不知道從何處下筆了，所有就把草稿箱躺了快一年的內容整理一下，分享分享。這篇文章是使用最簡單的方式實現地圖導航的需求，那就是通過喚起手機中的導航類軟...

ReactNative/blob/master/learn/RoutePlanExample.js" target="_blank" rel="nofollow,noindex">相關原始碼

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

很多人都認為喚起導航軟體進行導航，需要底層去寫實現，其實大可不必，通過ReactNative自帶的一些Api就可以實現我們想要的效果了。

Linking

Linking是RN中APP之間跳轉互動的Api介面，並且能解析其中攜帶的引數資料。

getInitialURL

當我們的應用被其它應用註冊喚醒，我們就可以通過它進行一些邏輯的處理，底層App喚醒的一些配置就不介紹了android 可前往https://developer.android.com/training/app-links/deep-linking#adding-filters 檢視，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，否則呼叫無效。

canOpenURL

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

百度

baidumap://map/direction?origin=latlng:34.264642646862,108.95108518068|name:我家&destination=大雁塔&mode=driving®ion=西安&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/">GitHub了，具體細節可以前往RoutePlan檔案 ,使用demo可前往RoutePlanExample檔案，可以直接下載demo。

ReactNative實現地圖導航

ReactNative/blob/master/learn/RoutePlanExample.js" target="_blank" rel="nofollow,noindex">相關原始碼

Linking

百度

高德

騰訊

您可能也會喜歡…