vue开发H5手机端页面打开App如高德地图导航

问题：使用vue开发H5页面的时候需要跳转地图App并导航到指定位置

实现功能：点击按钮打开第三方app导航，如果没有打开，或者没有安装，则运行网页地图导航

实现效果图如下：

1.点击按钮跳转

2.浏览器弹窗获取权限

3.打开导航成功

直接上代码：

<template>

  <div id="app">

    <img alt="Vue logo" src="./assets/logo.png" />

    <HelloWorld msg="Welcome to Your Vue.js App" />

    <div @click="handlClick(1)" style="marginBottom:20px">打开高德地图app</div>

    <div @click="handlClick(2)">打开百度地图</div>

  </div>

</template>

<script>

import HelloWorld from "./components/HelloWorld.vue";

export default {

  name: "App",

  components: {

    HelloWorld,

  },

  data() {

    return {

      //定义起点位置

      StartXY: {

        lng : 116.327404,

        lat : 39.971385,

        city: '北京市'

      },

      //定义终点位置

      EndXY: {

        lng: 116.545123,

          lat: 39.915599,

          city: "北京市",

      }

    }

  },

  methods: {

    handlClick(val) {

      /* Start  判断手机是IOS还是安卓 */

      let u = navigator.userAgent;

      //判断是否安卓

      let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1;

      // 判断是否IOS

      let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);

      /* End */

      //判断是否点击高德地图

      if(val === 1) {

        //判断是否是安卓手机

        if(isAndroid) {

          let queryStr = `?sourceApplication=msite&lat=${this.StartXY.lat}&lon=${this.StartXY.lng}&dev=1&style=2`

          window.location.href = `androidamap://navi${queryStr}`; 

        }else if(isIOS) {

          //IOS手机————高德地图不区分ios和安卓

          let queryStr = `?sourceApplication=msite&lat=${this.StartXY.lat}&lon=${this.StartXY.lng}&dev=1&style=2`

          window.location.href = `androidamap://navi${queryStr}`;

          let startTime = Date.now();

          let count = 0;

          let endTime = 0;

          let t = setInterval(function () {

            count += 1;

            endTime = Date.now() - startTime;

            if (endTime > 7000) {

              clearInterval(t);

            }

            if (count < 30) return;

            if (!(document.hidden || document.webkitHidden)) {

              window.location.href =

                "https://uri.amap.com/marker?position=116.545123,39.915599";

            }

          }, 200);

          window.onblur = function () {

            clearInterval(t);

          };

        }

        //百度地图

      }else if(val === 2){

        let queryStr = `?origin=name:我的位置|latlng:${this.StartXY.lat},${this.StartXY.lng}&destination=${this.EndXY.lat},${this.EndXY.lng}&region=${this.EndXY.city}&coord_type=bd09ll&mode=driving`

        if(isAndroid) {

          window.location.href = `bdapp://map/direction${queryStr}`;
        
          //以下代码为判断app是否已经打开

            let startTime = Date.now();

            let count = 0;

            let endTime = 0;

            let t = setInterval(function () {

              count += 1;

              endTime = Date.now() - startTime;

            //如果800毫秒后还未打开，清楚定时器，直接打开浏览器端
  
              if (endTime > 800) {

                clearInterval(t);

              }

              if (count < 30) return;

              //（是否打开的判断逻辑为当前页面是否进入后台）

              if (!(document.hidden || document.webkitHidden)) {

                window.location.href =

                  "http://api.map.baidu.com/direction" +

                  queryStr +

                  "&output=html";

              }
            
            //20为20毫秒判断一次，app是否打开
  
            }, 20);

            window.onblur = function () {

              clearInterval(t);

            };

        }else if(isIOS) {

          window.location.href = `baidumap://map/direction${queryStr}`;

        }

      }

    }

  },

};

</script>

https://lbsyun.baidu.com/index.php?title=uri/api/web --百度地图web调起API官方文档
https://lbs.amap.com/api/webservice/guide/api/direction --- 高德地图web调起API官方文档