手机浏览器 Android 和 IOS 跳转高德和百度地图 APP 及 坐标相互转换

手机浏览器 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: '' // 在查看位置界面底部显示的超链接,可点击跳转
});