vue h5 安卓和ios 调用高德地图、百度地图和腾讯地图app

export default {
  name: "navigator",
  data() {
    return {
      actions: [
        { value: "1", name: "高德地图" },
        { value: "2", name: "百度地图" },
        { value: "3", name: "腾讯地图" },
      ],
      lng: "",
      lat: "",
      city: "",
    };
  },
  methods: {
    onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起

      /* 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/);
      //判断是否点击高德地图
      if (item.value == 1) {
        //判断是否是安卓手机
        if (isAndroid) {
          let queryStr = `?sourceApplication=msite&lat=${this.lat}&lon=${this.lng}&dev=1&style=2`;
          window.location.href = `androidamap://navi${queryStr}`;
        } else if (isIOS) {
          let queryStr = `?sourceApplication=msite&lat=${this.lat}&lon=${this.lng}&dev=1&style=2`;
          window.location.href = `iosamap://viewMap${queryStr}`;
        }
        //百度地图
      } else if (item.value == 2) {
        if (isAndroid) {
          let queryStr = `?region=${this.city}&destination=${this.lat},${this.lng}&mode=driving&src=andr.baidu.openAPIdemo`;
          window.location.href = `bdapp://map/direction${queryStr}`;
        } else if (isIOS) {
          let queryStr = `?region=${this.city}&destination=${this.lat},${this.lng}&mode=driving&src=ios.baidu.openAPIdemo`;
          window.location.href = `baidumap://map/direction${queryStr}`;
        }
        //腾讯地图
      } else if (item.value == 3) {
        let queryStr = `?type=drive&fromcoord=CurrentLocation&to=${this.title}&tocoord=${this.lat},${this.lng}&referer=BY7BZ-6YSK7-UMCXU-PAXYI-5NQVT-OWFCL`;
        // 安卓ios通用
        window.location.href = `qqmap://map/routeplan${queryStr}`;
      }
    },
  },
};