手機瀏覽器 Android 和 IOS 跳轉高德和百度地圖 APP 及 坐標相互轉換

1.在手機瀏覽器運行地圖界面的時候需要進行打開相關的地圖進行導航，瀏覽器是可以的，但是微信的瀏覽器不可以（我沒有研究出來），事件被禁止掉了，

2.直接寫代碼，就是進行Android和IOS的操作

首先判斷手機機型
然后區分跳轉（需要相關的經緯度 和 目的地的名稱）

     // 跳轉百度
    function openLocation(x, y, name) {
        console.log(x, y, name);
        var url = "";
        var u = navigator.userAgent;
        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android終端
        if (isiOS) {
            //ios平台
            url = "baidumap://map/direction?origin=&destination=name:" + name + "|latlng:" + y + "," + x + "&mode=driving&src=ios.baidu.openAPIdemo"
            window.location.href = url;
        } else if (isAndroid) {
            //android平台
            url = "bdapp://map/direction?origin=&destination=name:" + name + "|latlng:" + y + "," + x + "&mode=driving&src=andr.baidu.openAPIdemo"
            window.location.href = url;
        }
    }
    // 跳轉高德
    function openLocationGao(x, y, name) {
        console.log(x, y, name);
        var url = "";
        var u = navigator.userAgent;
        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android終端
        if (isiOS) {
            //ios平台
            url = "iosamap://path?sourceApplication=applicationName&did=&dlat=" + y + "&dlon=" + x + "&dname=" + name + "&dev=0&t=0"
            // url = "iosamap://path?sourceApplication=applicationName&sid=BGVIS1&slat=&slon=&sname=&did=BGVIS2&dlat=" + y + "&dlon=" + x + "&dname=" + name + "&dev=1&t=0"
            window.location.href = url;
        } else if (isAndroid) {
            //android平台 120.378468,36.07045
            url = "amapuri://route/plan/?sid=&slat=&slon=&sname=&did=&dlat=" + y + "&dlon=" + x + "&dname=" + name + "&dev=0&t=0"
            window.location.href = url;
        }
    }

注意：跳轉的時候一定要看清楚跳轉的拼接的連接 &dev是偏移量 啥的 在官方文檔里面有

3.坐標的相互轉換 微信的地圖用的是騰訊地圖 坐標不一樣

    //百度坐標轉高德（傳入經度、緯度）
    function bd_decrypt(bd_lng, bd_lat) {
        var X_PI = Math.PI * 3000.0 / 180.0;
        var x = bd_lng - 0.0065;
        var y = bd_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 gg_lng = z * Math.cos(theta);
        var gg_lat = z * Math.sin(theta);
        return { lng: gg_lng, lat: gg_lat }
    }
    //高德坐標轉百度（傳入經度、緯度）
    function bd_encrypt(gg_lng, gg_lat) {
        var X_PI = Math.PI * 3000.0 / 180.0;
        var x = gg_lng, y = gg_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 bd_lng = z * Math.cos(theta) + 0.0065;
        var bd_lat = z * Math.sin(theta) + 0.006;
        return {
            bd_lat: bd_lat,
            bd_lng: bd_lng
        };
    }
    // 百度轉騰訊
    function tencent(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];
    }

微信好的解決方案就是使用微信公眾號的jssdk的依賴去完成，但是這要涉及到申請公眾號，申請完成后根據微信的文檔進行配置，使用微信自帶的打開地圖位置，然后進行打開APP的選取（完成后的效果為下圖）

在頁面上首先進行 jssdk的引入

// 微信配置
 wx.config({
      debug: true, //開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。  
      appId: appId, //必填，公眾號的唯一標識  
      timestamp: timestamp, // 必填，生成簽名的時間戳  
      nonceStr: nonceStr, //必填，生成簽名的隨機串  
      signature: signature, // 必填，簽名，見附錄1  
      jsApiList: ['openLocation', 'getLocation'] // 必填，需要使用的JS接口列表
  });

// 微信打開位置
wx.openLocation({
    latitude: y, // 緯度，浮點數，范圍為90 ~ -90
    longitude: x, // 經度，浮點數，范圍為180 ~ -180。
    name: name, // 位置名
    address: name, // 地址詳情說明
    scale: 15, // 地圖縮放級別,整形值,范圍從1~28。默認為最大
    infoUrl: '' // 在查看位置界面底部顯示的超鏈接,可點擊跳轉
});