Vue项目中跳转至百度\高德\腾讯地图第三方APP实现导航

最新推荐文章于 2024-08-09 15:45:07 发布

CDUT大米饭

最新推荐文章于 2024-08-09 15:45:07 发布

阅读量9.6k

点赞数 11

分类专栏： Vue Cordova

本文链接：https://blog.csdn.net/m0_38051293/article/details/101156841

版权

Vue 同时被 2 个专栏收录

2 篇文章 1 订阅

订阅专栏

Cordova

2 篇文章 0 订阅

订阅专栏

Vue项目中跳转至百度\高德\腾讯地图第三方APP实现导航

项目需求
项目实现
代码实现

项目需求

项目是vue制作的webapp，通过cordova打包生成的。需要实现点击某一个位置调用第三方APP（高德地图、腾讯地图、百度地图）实现导航功能。
在这里插入图片描述

项目实现

查询了高德地图API、腾讯地图API、百度地图API。
了解了大致实现过程，主要是通过获取包名，传递参数，调用接口，实现相应功能。
项目使用cordova打包，支持android、ios打开相应第三方地图APP。

新建cordova项目
依次执行

npm install -g cordova
cordova  create  test  com.cordova.test   test （创建cordova工程  <文件夹名> <包名> <app名>）
cordova platforms add android

安装cordova插件
在cordova官网插件中搜索appavailability和 startapp插件

进入查看插件使用说明。

进入命令行工具安装执行

    cd test   //进入cordova工程
    cordova plugin add cordova-plugin-appavailability
    cordova plugin startapp  //安装插件

代码实现

onClick(item) {  //item是传递过来的高德地图、百度地图、腾讯地图
        var baiduPackageName = "com.baidu.BaiduMap";//百度地图包名
        var gaodePackageName = "com.autonavi.minimap";//高德地图包名
        var destination = new Array(this.fromBottomBoxMsg[0].latitude.toFixed(6), 						     this.fromBottomBoxMsg[0].longitude.toFixed(6));//获取vuex中的想去目的地的经纬度参数
        var u = navigator.userAgent;//判断是android系统还是IOS系统
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
     var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        var Destination = this.fromBottomBoxMsg[0].address;
        var geoCoordinates = this.$store.state.geoCoordinates;
        if (item.name == "高德地图") {
          let scheme;
          if (isAndroid == true) {
            scheme = 'com.autonavi.minimap';//获取对应系统的高德地图包名
          }
          else {
            scheme = 'iosamap://';
          }
          appAvailability.check(scheme, function () {//使用插件的检测包名的函数，判断手机是否安装该第三方APP!!!!!最重要的地方
            if (isAndroid == true) {
              var sApp = startApp.set({
                "action": "ACTION_VIEW",
                "category": "CATEGORY_DEFAULT",
                "type": "text/css",
                "package": "com.autonavi.minimap"，
                "uri": "amapuri://route/plan/?dlat=" + destination[0] + "&dlon=" + destination[1] + "&dname=" + Destination + "&dev=0&t=0"，//传递经纬度参数
                "flags": ["FLAG_ACTIVITY_CLEAR_TOP", "FLAG_ACTIVITY_CLEAR_TASK"],
                "intentstart": "startActivity"
              });
              sApp.start(function () { /* success */
                //alert("OK");
              }, function (error) { /* fail */
                this.$toast(error);
              });
            } else {//若是IOS,则调起ios版本的
              window.location.href = "iosamap://navi?sourceApplication=applicationName&poiname="+Destination+"&poiid=BGVIS&lat="+destination[0]+ "&lon="+destination[1]+ "&dev=1&style=2";
            }
          }, function () {//若没有相应安装相应第三方APP，则弹出链接，提醒下载相应APK
            if (isAndroid == true) {
 cordova.InAppBrowser.open("http://amapdownload.autonavi.com/down6/C3060/Amap_V8.75.1.2600_android_C3060_(Build1811010937).apk", '_system', 'hardwareback=no')
            }
            else {
              window.location.href = "itms-apps://itunes.apple.com/cn/app/%E9%AB%98%E5%BE%B7%E5%9C%B0%E5%9B%BE-%E7%B2%BE%E5%87%86%E5%9C%B0%E5%9B%BE-%E5%AF%BC%E8%88%AA%E5%87%BA%E8%A1%8C%E5%BF%85%E5%A4%87/id461703208?mt=8";
            }
          });
        }
        else if (item.name == "百度地图") {
          let scheme;
          if (isAndroid == true) {
            scheme = 'com.baidu.BaiduMap';
          }
          else {
            scheme = 'baidumap://';
          }
            appAvailability.check(scheme, function () {//success callback
              if (isAndroid == true) {
                var sApp = startApp.set({
                  /* params */
                  "action": "ACTION_VIEW",
                  "category": "CATEGORY_DEFAULT",
                  "type": "text/css",
                  "package": "com.baidu.BaiduMap",
                  "uri": "baidumap://map/direction?destination=name:" + Destination + "|latlng:" + destination[0] + "," + destination[1] + "&mode=driving",
                  "flags": ["FLAG_ACTIVITY_CLEAR_TOP", "FLAG_ACTIVITY_CLEAR_TASK"],
                  "intentstart": "startActivity"
                });
                sApp.start(function () { /* success */
                  //alert("OK");
                }, function (error) { /* fail */
                  this.$toast(error);
                });
              }
              else
              {
                window.location.href = "baidumap://map/direction?origin=" + geoCoordinates + "&destination=" + Destination + "&mode=driving&src=webapp.navi.yourCompanyName.yourAppName";
              }
            }, function () {//
              if (isAndroid == true) {
                cordova.InAppBrowser.open("https://map-mobile-lbsapp.cdn.bcebos.com/baidumaplite_AndroidPhone_v10.8.23(2.1.2)_1021366a.apk", '_system', 'hardwareback=no')
              }
              else
              {
                window.location.href = "itms-apps://itunes.apple.com/cn/app/%E7%99%BE%E5%BA%A6%E5%9C%B0%E5%9B%BE-%E6%99%BA%E8%83%BD%E5%AF%BC%E8%88%AA%E8%B7%AF%E7%BA%BF%E8%A7%84%E5%88%92%E6%97%85%E6%B8%B8%E5%87%BA%E8%A1%8C/id452186370?mt=8";
              }
            });
          }
        else if (item.name == "腾讯地图") {
          let scheme;
          if (isAndroid == true) {
            scheme = 'com.tencent.map';
          }
          else {
            scheme = 'sosomap://';
          }
          appAvailability.check(scheme, function () {//success callback
            if (isAndroid == true) {
              var sApp = startApp.set({
                /* params */
                "action": "ACTION_VIEW",
                "category": "CATEGORY_DEFAULT",
                "type": "text/css",
                "package": "com.tencent.map",
                "uri": "qqmap://map/routeplan?type=drive&to=" + Destination + "&tocoord=" + destination[0] + "," + destination[1] + "&coord_type=1&policy=0",
                "flags": ["FLAG_ACTIVITY_CLEAR_TOP", "FLAG_ACTIVITY_CLEAR_TASK"],
                "intentstart": "startActivity"
              });
              sApp.start(function () { /* success */
                //alert("OK");
              }, function (error) { /* fail */
                this.$toast(error);
              });
            }
            else {
              window.location.href = "qqmap://map/routeplan?type=drive&fromcoord=CurrentLocation&to=" + address + "&tocoord=" + destination[0] + "," + destination[1] + ""
            }
          }, function () {//
            if (isAndroid == true) {
              cordova.InAppBrowser.open("https://map.myapp.com/myapp/map/tencentmap_8.1.5.544_android_00002.apk",'_system','hardwareback=no')
            } else {
              window.location.href = "itms-apps://itunes.apple.com/cn/app/%E8%85%BE%E8%AE%AF%E5%9C%B0%E5%9B%BE-%E8%B7%AF%E5%86%B5%E7%B2%BE%E5%87%86%E5%87%BA%E8%A1%8C%E5%BF%85%E5%A4%87%E7%9A%84%E5%AF%BC%E8%88%AA%E8%BD%AF%E4%BB%B6/id481623196?mt=8"
            }
          })
        }
        else if (item.name == "苹果地图") {
          window.location.href= "http://maps.apple.com/?daddr=" + Destination + "&dirflg=d&t=h"
        }
        else {
          this.show = false;
        }
      }