react-native 點擊跳轉到高德、百度地圖并顯示路線規(guī)劃

參考來自: http://www.reibang.com/p/ca8d03b89410

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') {
                console.log('百度地圖--傳入的經(jīng)緯度===','lat==',lat,'lon===',lon,'name===',name ,    )

                //  mode = walking表示為步行路線
                //url = `baidumap://map/direction?region=beijing&origin=39.98871,116.43234&destination=40.057406655722,116.2964407172&coord_type=bd09ll&mode=walking&src=andr.baidu.openAPIdemo`

                 url = `baidumap://map/direction?destination=name:${name}|latlng:${lat},${lon}&mode=walking&coord_type=bd09ll&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;

使用
注意: lat , lon 注意傳入的經(jīng)緯度要對應兩個地圖的坐標系焙矛、高德就傳入高德坐標系的經(jīng)緯度葫盼、百度就傳入百度坐標系的經(jīng)緯度,
關于坐標系的轉換也有總結了:http://www.reibang.com/p/2bc62086ae4c

import MyUtil from '../common/MyUtil'

//調用
MyUtil.turn2MapApp(lon, lat, 'baidu');

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市村斟,隨后出現(xiàn)的幾起案子贫导,更是在濱河造成了極大的恐慌,老刑警劉巖蟆盹,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件孩灯,死亡現(xiàn)場離奇詭異,居然都是意外死亡逾滥,警方通過查閱死者的電腦和手機峰档,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進店門急凰,熙熙樓的掌柜王于貴愁眉苦臉地迎上來锁摔,“玉大人纵穿,你說我怎么就攤上這事区赵∧粼ǎ” “怎么了穴豫?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵劝堪,是天一觀的道長墓怀。 經(jīng)常有香客問我捉蚤,道長抬驴,這世上最難降的妖魔是什么炼七? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮布持,結果婚禮上豌拙,老公的妹妹穿的比我還像新娘。我一直安慰自己题暖,他們只是感情好按傅,可當我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著胧卤,像睡著了一般逞敷。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上灌侣,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天推捐,我揣著相機與錄音,去河邊找鬼侧啼。 笑死牛柒,一個胖子當著我的面吹牛,可吹牛的內容都是我干的痊乾。 我是一名探鬼主播皮壁,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼哪审!你這毒婦竟也來了蛾魄?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤湿滓,失蹤者是張志新(化名)和其女友劉穎滴须,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體叽奥,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡扔水,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了朝氓。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片魔市。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖赵哲,靈堂內的尸體忽然破棺而出待德,到底是詐尸還是另有隱情,我是刑警寧澤枫夺,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布将宪,位于F島的核電站,受9級特大地震影響,放射性物質發(fā)生泄漏涧偷。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一毙死、第九天 我趴在偏房一處隱蔽的房頂上張望燎潮。 院中可真熱鬧,春花似錦扼倘、人聲如沸确封。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽爪喘。三九已至,卻和暖如春纠拔,著一層夾襖步出監(jiān)牢的瞬間秉剑,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工稠诲, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留侦鹏,地道東北人。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓臀叙,卻偏偏與公主長得像略水,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子劝萤,可洞房花燭夜當晚...
    茶點故事閱讀 45,870評論 2 361

推薦閱讀更多精彩內容