國內三大地圖（騰訊、高德、百度）路線規劃功能的整合

寫在前面

基於導航到門店的需求，於是有了這一個隨筆，例如一些社群團購，自提點導航的功能，同樣適用的。

 

話不多說，開整

一、先定一個目標點（這個通常是通過介面獲取的）

建議通過騰訊地圖座標拾取器進行拾取座標

騰訊地圖座標拾取器

因為騰訊和高德用的座標型別都是gcj02，而百度用的是bd09ll，所以很顯然的我們會設定目標點的座標型別為gcj02的，後面再進行轉換（文末有）就好了。（這些座標型別這裡不做深究）

 

以廣州塔為例

const to = {
    lng: 113.32446,
    lat: 23.10647,
    city: '廣州市',
    name: '廣州塔'
}

 

二、騰訊地圖

官方文件https://lbs.qq.com/webApi/uriV1/uriGuide/uriWebRoute

我們可以注意下下面框出來的那一句話

 

所以我寫程式碼的時候也沒有帶上起點

貼程式碼

function goQQ() {
    location = 'https://apis.map.qq.com/uri/v1/routeplan?type=drive&to=' +
        to.name + '&tocoord=' + to.lat + ',' + to.lng + '&policy=1&referer=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77'
};

 

三、高德地圖

官方文件https://lbs.amap.com/api/uri-api/guide/travel/route

和騰訊地圖一樣，高德地圖也不需要傳入起點，預設為當前位置，在微信內建瀏覽器內可能無法獲取到當前位置哦，需要用第三方瀏覽器開啟

 

 貼程式碼

function goGd() {
    location = 'https://uri.amap.com/navigation?from=&to=' + to.lat + ',' + to.lng + ',' + to.name +
        '&src=mypage&coordinate=gaode&callnative=0'
};

 

四、百度地圖

官方文件https://lbsyun.baidu.com/index.php?title=uri/api/web

往下翻，找到 2.2.3公交、駕車、步行路線規劃

可以看到框出來的點都是必選的

 

這時候我們就得做一些動作了

1、獲取當前位置

1.1 先申請百度雲的Key

https://lbsyun.baidu.com/index.php?title=jspopular/guide/getkey

1.2 html引入API

<script src="https://api.map.baidu.com/api?v=2.0&ak=pQWl932IkCMb3elP8MpLCyUsWTkFCFGm"></script>

1.3 獲取當前位置資訊

//獲取當前位置資訊
function getPoint() {
    return new Promise((resolve, reject) => {
        let point = {}; //初始化當前座標資訊
        let geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function(r) {    //當前座標資訊
            if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                mk = new BMap.Marker(r.point);
                point.lng = r.point.lng; //經度
                point.lat = r.point.lat; //緯度
                let gc = new BMap.Geocoder();
                gc.getLocation(r.point, function(rs) {    //逆地址解釋
                    point.city = rs.addressComponents.city; //當前城市
                    resolve(point);
                });
            } else {
                alert('failed' + this.getStatus());
            }
        });
    })
}

 

2、轉換終點座標為百度經緯度座標

/**
 * 騰訊地圖座標轉換百度地圖座標
 * lng 騰訊經度
 * lat 騰訊緯度
 */
function qqMapToBMap(lng, lat) {
    if (lng == null || lng == '' || lat == null || lat == '')
        return [lng, lat];
    var x_pi = 3.14159265358979324;
    var x = parseFloat(lng);
    var y = parseFloat(lat);
    var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi);
    var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi);
    var lng = (z * Math.cos(theta) + 0.0065).toFixed(5);
    var lat = (z * Math.sin(theta) + 0.006).toFixed(5);
    return [lng, lat];
};

 

3、上程式碼

//因為百度地圖當前定位是非同步獲取的一個方式，所以要使用async/await
async function goBd() {
    //等待非同步獲取資料
    await getPoint().then(point => {
        let destination = qqMapToBMap(to.lng, to.lat); //騰訊地圖座標轉百度地圖座標
        let destination_lng = destination[0];
        let destination_lat = destination[1];
        location =
            'http://api.map.baidu.com/direction?origin=latlng:' + point.lat +
            ',' + point.lng +
            '|name:我的位置&destination=latlng:' + destination_lat + ',' + destination_lng + '|name:' + to
            .name +
            '&origin_region=' + point.city + '&destination_region=' + to.city +
            '&mode=driving&output=html&src=webapp.baidu.openAPIdemo';
    });
};

 

完整程式碼　　戳我

 

附上百度轉騰訊的程式碼

/**
 * 百度地圖座標轉換成騰訊地圖座標
 * lng 百度經度
 * lat 百度緯度
 */
function bMapToQQMap(lng, lat) {
    if (lng == null || lng == '' || lat == null || lat == '')
        return [lng, lat];
    var x_pi = 3.14159265358979324;
    var x = parseFloat(lng) - 0.0065;
    var y = parseFloat(lat) - 0.006;
    var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
    var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
    var lng = (z * Math.cos(theta)).toFixed(7);
    var lat = (z * Math.sin(theta)).toFixed(7);
    return [lng, lat];
}

 

對你有用的話，點個推薦吧！