VUE_vue跳转第三方地图导航软件定位导航

小歪 | 前端

已于 2024-04-12 15:18:20 修改

阅读量2.4k

点赞数 6

分类专栏： # VUE 文章标签： vue.js 前端 javascript

于 2021-02-01 16:36:24 首次发布

本文链接：https://blog.csdn.net/weixin_44599931/article/details/113523569

版权

VUE 专栏收录该内容

114 篇文章 3 订阅

订阅专栏

在这里插入图片描述

当前项目引用了vant弹框组件

<van-action-sheet v-model="show" description="请选择已安装APP" :actions="actions" @select="onSelect" />

export default {
 data() {
      return {
      	  show:true,
          actions: [{id:1, name: '腾讯地图' }, {id:2, name: '百度地图' }, {id:3, name: '高德地图' }],
      };
  },
  created() {
  },
  mounted(){
  },
  methods: {
      //导航go
      onSelect(item){
          console.log(item);
          let longitude="导航地址经度",
          	  latitude="导航地址维度"
          let name ="导航地址名称";
          let url = "";
          const u = navigator.userAgent;
          const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
          const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') >-1;
          if(isAndroid){
              switch (item.id) {
                  //下面是拼接url,不同系统以及不同地图都有不同的拼接字段
                  case 1:
                      //注意referer=xxx的xxx替换成你在腾讯地图开发平台申请的key
                      url = `qqmap://map/geocoder?coord=${latitude},${longitude}&referer=xxx`;
                      break;
                  case 2:
                      url = `baidumap://map/marker?location=${latitude},${longitude}&title=${name}&coord_type=gcj02&src=andr.baidu.openAPIdemo`;
                      break;
                  case 3:
                      url = `androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
                      break;
                  default:
                      break;
              }
              if (url != "") {
                  window.open(url,"_blank")
              }
          }else if(isiOS){
              switch (item.id) {
                  case 1:
                      url = `qqmap://map/geocoder?coord=${latitude},${longitude}&referer=xxx`;
                      break;
                  case 2:
                      url = `baidumap://map/marker?location=${latitude},${longitude}&title=${name}&content=${name}&src=ios.baidu.openAPIdemo&coord_type=gcj02`;
                      break;
                  case 3:
                      url = `iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
                      break;
                  default:
                      break;
              }
              if (url != "") {
                  window.open(url,"_blank")
              }
          }
      }
  },
};