永夜-Evernight

今天遇到一个需求，我们用vue做的APP里有个地图显示图标功能，现在需要在点击图标的时候掉起百度或者高德地图进行导航，在这里记录一下集成过程

在网上找了好多vue打包的APP调用百度地图APP的文章，也看了百度地图的官网文档，结果。。。

估计是打开的方式不对，一篇有用的都没找到，因为前端学的比较粗浅，官网的文档也看不懂。因为之前打包APP及处理一些相关问题的时候在DCloud社区看到过很多优秀的文章，就去里面搜着碰碰运气

还真被我找到了：uni-app 中如何打开外部应用，如：浏览器、淘宝、AppStore、QQ等

文章写的很详细，也很实用，我这里只选取调用地图APP的部分（这里主要用到原文更多实用例子中打开地图并指定地点部分）

环境

vue：vue2

框架：vant

app框架：uni-app

原文方法

openMap(){  
            var url = "";  
            if (plus.os.name=="Android") {  
                var hasBaiduMap = plus.runtime.isApplicationExist({pname:'com.baidu.BaiduMap',action:'baidumap://'});  
                var hasAmap = plus.runtime.isApplicationExist({pname:'com.autonavi.minimap',action:'androidamap://'});  
                var urlBaiduMap = "baidumap://map/marker?location=39.968789,116.347247&title=DCloud&src=Hello+uni-app";  
                var urlAmap = "androidamap://viewMap?sourceApplication=Hello+uni-app&poiname=DCloud&lat=39.9631018208&lon=116.3406135236&dev=0"  
                if (hasAmap && hasBaiduMap) {  
                    plus.nativeUI.actionSheet({title:"选择地图应用",cancel:"取消",buttons:[{title:"百度地图"},{title:"高德地图"}]}, function(e){  
                        switch (e.index){  
                            case 1:  
                                plus.runtime.openURL(urlBaiduMap);  
                                break;  
                            case 2:  
                                plus.runtime.openURL(urlAmap);  
                                break;  
                        }  
                    })  
                }  
                else if (hasAmap) {  
                    plus.runtime.openURL(urlAmap);  
                }  
                else if (hasBaiduMap) {  
                    plus.runtime.openURL(urlBaiduMap);  
                }  
                else{  
                    url = "geo:39.96310,116.340698?q=%e6%95%b0%e5%ad%97%e5%a4%a9%e5%a0%82";  
                    plus.runtime.openURL(url); //如果是国外应用，应该优先使用这个，会启动google地图。这个接口不能统一坐标系，进入百度地图时会有偏差  
                }  
            } else{  
                // iOS上获取本机是否安装了百度高德地图，需要在manifest里配置，在manifest.json文件app-plus->distribute->apple->urlschemewhitelist节点下添加（如urlschemewhitelist:["iosamap","baidumap"]）  
                plus.nativeUI.actionSheet({title:"选择地图应用",cancel:"取消",buttons:[{title:"Apple地图"},{title:"百度地图"},{title:"高德地图"}]}, function(e){  
                    console.log("e.index: " + e.index);  
                    switch (e.index){  
                        case 1:  
                            url = "http://maps.apple.com/?q=%e6%95%b0%e5%ad%97%e5%a4%a9%e5%a0%82&ll=39.96310,116.340698&spn=0.008766,0.019441";  
                            break;  
                        case 2:  
                            url = "baidumap://map/marker?location=39.968789,116.347247&title=DCloud&src=Hello+uni-app";  
                            break;  
                        case 3:  
                            url = "iosamap://viewMap?sourceApplication=Hello+uni-app&poiname=DCloud&lat=39.9631018208&lon=116.3406135236&dev=0";  
                            break;  
                        default:  
                            break;  
                    }  
                    if (url!="") {  
                        plus.runtime.openURL( url, function( e ) {  
                            plus.nativeUI.alert("本机未安装指定的地图应用");  
                        });  
                    }  
                })  
            }  
        },  

定义公共方法

对原文方法进行改装，定义自己的公共方法

// 调用第三方应用进行导航
export function openMap (title, lat, lon) {
  if (plus.os.name == 'Android') {
    var hasBaiduMap = plus.runtime.isApplicationExist({ pname: 'com.baidu.BaiduMap', action: 'baidumap://' })
    var hasAmap = plus.runtime.isApplicationExist({ pname: 'com.autonavi.minimap', action: 'androidamap://' })
    var urlBaiduMap = 'baidumap://map/marker?location=' + lat + ',' + lon + '&title=' + title + '&src=';
    var urlAmap = 'androidamap://viewMap?poiname=' + title + '&lat=' + lat + '&lon=' + lon + '&dev=0'
    if (hasAmap && hasBaiduMap) {
      plus.nativeUI.actionSheet({ title: '选择地图应用', cancel: '取消', buttons: [{ title: '百度地图' }, { title: '高德地图' }] }, function (e) {
        switch (e.index) {
          case 1:
            plus.runtime.openURL(urlBaiduMap)
            break
          case 2:
            plus.runtime.openURL(urlAmap)
            break
        }
      })
    } else if (hasAmap) {
      plus.runtime.openURL(urlAmap)
    } else if (hasBaiduMap) {
      plus.runtime.openURL(urlBaiduMap)
    }
  }
}

因为APP只是用Android端，所以移除了IOS端

• 此时发现一个问题，跳转到高德地图APP后定位是准确的，但是跳转百度地图APP后定位有偏差

跳转百度地图APP后定位偏差问题

查了一下，这是因为我们获取的坐标是通过高德地图获取的，而百度地图和高德地图之间的坐标是有偏差的，这里找了个高德地图坐标转百度地图坐标的方法：高德地图坐标与百度坐标转换问题

// 高德地图坐标转百度地图坐标
function bd_encrypt (gg_lng, gg_lat) {
  var X_PI = Math.PI * 3000.0 / 180.0
  var x = gg_lng; var 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
  }
}

在地图APP调用工具类中调用该方法，转换坐标

// 调用第三方应用进行导航
function openMap (title, lat, lon) {
  if (plus.os.name == 'Android') {
    var hasBaiduMap = plus.runtime.isApplicationExist({ pname: 'com.baidu.BaiduMap', action: 'baidumap://' })
    var hasAmap = plus.runtime.isApplicationExist({ pname: 'com.autonavi.minimap', action: 'androidamap://' })

    // 因为坐标是高德的，需要转成百度的
    var bd = bd_encrypt(lon, lat);
    var urlBaiduMap = 'baidumap://map/marker?location=' + bd.bd_lat + ',' + bd.bd_lng + '&title=' + title + '&src=';
    var urlAmap = 'androidamap://viewMap?poiname=' + title + '&lat=' + lat + '&lon=' + lon + '&dev=0'
    if (hasAmap && hasBaiduMap) {
      plus.nativeUI.actionSheet({ title: '选择地图应用', cancel: '取消', buttons: [{ title: '百度地图' }, { title: '高德地图' }] }, function (e) {
        switch (e.index) {
          case 1:
            plus.runtime.openURL(urlBaiduMap)
            break
          case 2:
            plus.runtime.openURL(urlAmap)
            break
        }
      })
    } else if (hasAmap) {
      plus.runtime.openURL(urlAmap)
    } else if (hasBaiduMap) {
      plus.runtime.openURL(urlBaiduMap)
    }
  }
}

至此已经实现了客户需要的功能，完美收工！

联系方式

作者：永夜

邮箱：Evernight@aliyun.com

以上内容有不正确的地方或者不完善的地方烦请指正！🙏🙏🙏