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

參考來(lái)自: http://www.itdecent.cn/p/ca8d03b89410

import { Linking, Platform } from 'react-native';
var MyUtil = {
    /**
     * 跳轉(zhuǎn)到導(dǎo)航界面
     * @param lon
     * @param lat
     * @param name
     * @param targetAppName browser-瀏覽器打開(kāi), gaode-高德APP, baidu-百度APP,如果沒(méi)有安裝相應(yīng)APP則使用瀏覽器打開(kāi)。
     */
    turn2MapApp(lon = 0, lat = 0, targetAppName = 'baidu', name = '目標(biāo)地址'){
        if (0 == lat && 0 == lon) {
            console.warn('暫時(shí)不能導(dǎo)航');
            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表示為步行路線(xiàn)
                //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)緯度要對(duì)應(yīng)兩個(gè)地圖的坐標(biāo)系、高德就傳入高德坐標(biāo)系的經(jīng)緯度、百度就傳入百度坐標(biāo)系的經(jīng)緯度,
關(guān)于坐標(biāo)系的轉(zhuǎn)換也有總結(jié)了:http://www.itdecent.cn/p/2bc62086ae4c

import MyUtil from '../common/MyUtil'

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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容