親測可行...
react-native 將目標地址的經緯度傳給高德或者百度來實現從當前位置到目標地址的路線規劃。
IOS端
配置白名單 由于iOS的限制,iOS系統在9之后的版本中,如果開發者的app希望調起高德地圖,必須在自己app的設置中配置白名單。
配置方法:
1、找到您的Info.plist文件
2、在文件中添加key:LSApplicationQueriesSchemes,類型是Array,如果曾經添加過,無需再次添加。
3、Array中添加一個item,類型為String,值為iosamap。
添加完成后截圖如下:
Info.plist.png
工具類MyUtil.js
import { Linking, Platform } from 'react-native';
var MyUtil = {
/**
* 跳轉到導航界面
* @param lon
* @param lat
* @param name
* @param targetAppName browser-瀏覽器打開, gaode-高德APP, baidu-百度APP,如果沒有安裝相應APP則使用瀏覽器打開。
*/
turn2MapApp(lon = 0, lat = 0, targetAppName = 'baidu', name = '目標地址'){
if (0 == lat && 0 == lon) {
console.warn('暫時不能導航');
return;
}
let url = '';
let webUrl = `http://uri.amap.com/navigation?to=${lon},${lat},${name}&mode=bus&coordinate=gaode`;
let webUrlGaode = `http://uri.amap.com/navigation?to=${lon},${lat},${name}&mode=bus&coordinate=gaode`;
let webUrlBaidu = `http://api.map.baidu.com/direction?destination=latlng:${lat},${lon}|name=${name}&mode=transit&coord_type=gcj02&output=html&src=mybaoxiu|wxy`;
url = webUrl;
if (Platform.OS == 'android') {//android
if (targetAppName == 'gaode') {
// webUrl = 'androidamap://navi?sourceApplication=appname&poiname=fangheng&lat=36.547901&lon=104.258354&dev=1&style=2';
url = `androidamap://route?sourceApplication=appname&dev=0&m=0&t=1&dlon=${lon}&dlat=${lat}&dname=${name}`;
webUrl = webUrlGaode;
} else if (targetAppName == 'baidu') {
url = `baidumap://map/direction?destination=name:${name}|latlng:${lat},${lon}&mode=transit&coord_type=gcj02&src=thirdapp.navi.mybaoxiu.wxy#Intent;scheme=bdapp;package=com.baidu.BaiduMap;end`;
webUrl = webUrlBaidu;
}
} else if (Platform.OS == 'ios') {//ios
if (targetAppName == 'gaode') {
url = `iosamap://path?sourceApplication=appname&dev=0&m=0&t=1&dlon=${lon}&dlat=${lat}&dname=${name}`;
webUrl = webUrlGaode;
} else if (targetAppName == 'baidu') {
url = `baidumap://map/direction?destination=name:${name}|latlng:${lat},${lon}&mode=transit&coord_type=gcj02&src=thirdapp.navi.mybaoxiu.wxy#Intent;scheme=bdapp;package=com.baidu.BaiduMap;end`;
webUrl = webUrlBaidu;
}
}
Linking.canOpenURL(url).then(supported => {
if (!supported) {
console.log('Can\'t handle url: ' + url);
return Linking.openURL(webUrl).catch(e => console.warn(e));
} else {
return Linking.openURL(url).catch(e => console.warn(e));
}
}).catch(err => console.error('An error occurred', err));
},
};
module.exports = MyUtil;
調用:
MyUtil.turn2MapApp(longitude, latitude, 'gaode');
參考鏈接:
高德
http://lbs.amap.com/api/amap-mobile/gettingstarted/
http://lbs.amap.com/api/uri-api/guide/travel/route
http://lbs.amap.com/api/amap-mobile/guide/android/route
http://lbs.amap.com/api/amap-mobile/guide/ios/route
百度
http://lbsyun.baidu.com/index.php?title=uri/api/web