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

素颜马尾好姑娘i 2022-10-26 01:29 266阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5OTkzMQ_size_16_color_FFFFFF_t_70]

当前项目引用了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")
                  }
              }
          }
      },
    };

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5OTkzMQ_size_16_color_FFFFFF_t_70]: /images/20221024/d29bae5b393f467ca55d412910f69cb1.png