WEB使用VUE3实现地图导航跳转

我们在用手机查看网页时可以通过传入经纬度去设置目的地然后跳转到对应的地图导航软件,如果没有下载软件则会跳转到下载界面

注意:

  1. 高德地图是一定会跳转到一个新网页然后去询问用户是否需要打开软件
  2. 百度和腾讯地图是直接调用软件的
  3. 这个方法有缺陷,因为我们判断用户是否下载软件是通过监听用户的行为,判断页面是否发生变化来决定的,但是某些移动操作系统,如iOS,在使用深度链接时可能总是提示用户确认是否打开第三方应用。(此时我们如果不去点击确认打开第三方应用,过两秒后页面也会自动跳转到对应的下载界面)这种行为是由操作系统控制的,可能没有办法绕过它。第三方应用程序的行为也起着作用。如果应用程序不能正确处理深度链接,它可能总是提示用户打开应用程序,即使它已经安装了。

不幸的是,由于这种行为受到移动操作系统和第三方应用的影响,可能没有一个放之四海而皆通的解决方案,这种行为可能会因不同的设备和应用版本而有所不同。当你在应用中实现深度链接时,测试和考虑你所瞄准的特定应用行为是很重要的。

代码

<template><div class="app-container"><div v-for="(location, index) in locations" :key="index"><span>{{ location.name }}:</span><el-selectv-model="selectedType[index]"clearable@change="(e) => navigateToMap(location, selectedType[index])"><el-option label="高德地图" value="gaode"></el-option><el-option label="腾讯地图" value="tencent"></el-option><el-option label="百度地图" value="baidu"></el-option></el-select</div></div>
</template><script setup>
import { ref, toRefs, reactive } from "vue";const data = reactive({selectedType: [],userLocation: {},appOpenedFlag: false,
});const { selectedType, userLocation, appOpenedFlag } = toRefs(data);const locations = [{name: "南京热河路",latitude: 32.088169,longitude: 118.74247,destination: "32.088169,118.74247",},{name: "秦皇岛",latitude: 39.9658,longitude: 119.592224,destination: "39.9658,119.592224",},{name: "大理古城",latitude: 25.69547,longitude: 100.1655,destination: "25.69547,100.1655",},
];// 获取用户当前位置
function getCurrentLocation() {navigator.geolocation.getCurrentPosition((position) => {userLocation.value = {lat: position.coords.latitude,lng: position.coords.longitude,};});
}// 生成导航链接
function navigateToMap(location, type) {getCurrentLocation();const { name, latitude, longitude, destination } = location;let url = "";switch (type) {case "gaode":url = `https://uri.amap.com/navigation?to=${longitude},${latitude},${name}&mode=car&policy=2&src=myLocation&coordinate=gaode&callnative=1`;break;case "tencent":url = `qqmap://map/routeplan?type=drive&fromcoord=${userLocation.value.lat},${userLocation.value.lng}&tocoord=${destination}&referer=yourAppName`;break;case "baidu":url = `baidumap://map/direction?origin=${userLocation.value.lat},${userLocation.value.lng}&destination=${destination}&mode=driving&src=yourAppName`;break;}appOpenedFlag.value = false;window.location.href = url;// 检查用户在打开应用程序后是否返回到网页setTimeout(() => {if (!appOpenedFlag.value) {redirectToDownloadPage(type);}}, 2000);
}// 回调函数,用于在应用程序成功打开时设置标志
window.addEventListener("visibilitychange", () => {if (document.visibilityState === "visible") {appOpenedFlag.value = true;}
});// 重定向到下载页面
function redirectToDownloadPage(type) {switch (type) {case "gaode":window.location.href = "https://www.amap.com/";break;case "baidu":window.location.href = "https://map.baidu.com/";break;case "tencent":window.location.href = "https://map.qq.com/";break;}
}
</script>

效果

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/140948.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JavaScript中的代理对象(proxy)

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 创建代理对象⭐ 使用代理对象⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友…

【车载开发系列】ECU Application Software程序刷新步骤

【车载开发系列】ECU Application Software程序刷新步骤 ECU Application Software程序刷新步骤 【车载开发系列】ECU Application Software程序刷新步骤一. Boot Software&#xff08;引导软件&#xff09;1&#xff09;boot manager&#xff08;启动管理器&#xff09;2&…

ElasticSearch(二)

1.DSL查询文档 elasticsearch的查询依然是基于JSON风格的DSL来实现的。 1.1.DSL查询分类 Elasticsearch提供了基于JSON的DSL&#xff08;Domain Specific Language&#xff09;来定义查询。常见的查询类型包括&#xff1a; 查询所有&#xff1a;查询出所有数据&#xff0c;…

挂件板死机刷固件

用ESP32-DevKitC_V4刷固件的工具flash_download_tool_3.9.5.exe 挂件板子端口接线依次为V&#xff08;接3V3&#xff09;、R&#xff08;接TXD&#xff09;、T&#xff08;接RXD&#xff09;、G&#xff08;接GND&#xff09;、L&#xff08;悬空&#xff09; 1.选择ESP8266&…

springboot 捕获数据库唯一索引导致的异常

在一些业务场景中,需要保证数据的唯一性,一般情况下,我们会先到数据库中去查询是否存在,再去判断是否可以插入新的数据.如果是在高并发的情况下,可能还是会出现重复的情况.这时候可能就需要用到锁.也可以在数据库中设置唯一索引. 如果使用唯一索引,在插入相同数据的情况下会抛出…

大二毕设.3-网盘系统

目录 技术选型&#xff1a; 功能概括&#xff1a; 基本演示&#xff1a; 实现讲解&#xff1a; 技术选型&#xff1a; 前端: Vue3 Element Plus后端: SpringBoot Mybatis-Plus MySQL Redis Caffeine FastDFS/OSS SpringCloud Stream RocketMQ Zookeeper 功能概括&…

【李沐深度学习笔记】基础优化方法

课程地址和说明 基础优化方法p2 本系列文章是我学习李沐老师深度学习系列课程的学习笔记&#xff0c;可能会对李沐老师上课没讲到的进行补充。 基础优化方法 在讲具体的线性回归实现之前&#xff0c;要先讲一下基础的优化模型的方法 梯度下降 当模型没有显示解&#xff08…

【操作系统笔记二】链接阶段ELF文件

链接阶段&#xff1a;符号解析 链接阶段主要包含&#xff1a; 符号解析重定位 一般情况下&#xff0c;每个 C 文件可以看成一个程序模块&#xff0c;比如下边的main.c就是一个程序模块 #include <stdio.h>extern int shared; int sum(int *a, int n); int array[2] …

三维模型轻量化引擎HOOPS纹理技术概览

随着计算机图形学和虚拟现实技术的飞速发展&#xff0c;大规模三维模型的应用领域不断扩展&#xff0c;如游戏开发、建筑设计、工程模拟等。然而&#xff0c;这些大规模模型往往具有复杂的几何结构和高分辨率的纹理&#xff0c;导致文件大小庞大&#xff0c;不利于在线传输和实…

Stellar Toolkit for MySQL 9.0 Crack 3in1

面向数据库管理员的 MySQL 工具包 Stellar Toolkit for MySQL是一款三合一软件套件&#xff0c;用于修复损坏的 MySQL 和 MariaDB 数据库、从 MySQL 数据库的 InnoDB 和 MyISAM 表恢复数据以及分析 MySQL 数据库日志文件。该软件还可以以最高的安全性和完整性相互转换 MySQL/Ma…

面试官:你了解axios的原理吗?有看过它的源码吗?

面试官&#xff1a;你了解axios的原理吗&#xff1f;有看过它的源码吗&#xff1f; 一、axios的基本使用 关于 axios 的基本使用&#xff0c;上篇文章已经有所涉及&#xff0c;这里再稍微回顾一下&#xff1a; 发送请求 import axios from axios;axios(config) // 直接传入…

Java内存模型介绍

文章目录 Java内存模型前言Java内存模型基本介绍指令重排相关概念主存和本地内存相关介绍JMM中的8种同步规则和8种同步操作happens-before 原则内存屏障总结 Java内存模型 前言 本文主要介绍一下JMM中的一些常见概念&#xff0c;通过本文让你能够快速的对JMM有一个大致的了解 …

如何看待Unity新的收费模式?

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…

在uniapp中使用 秋云ucharts图表,运行到小程序

步骤一&#xff1a;通过使用 HBuilderX 直接导入项目&#xff08;uni_modules 版本&#xff09; 步骤二&#xff1a;在uCharts官网 - 秋云uCharts跨平台图表库 演示中&#xff0c;先弄个demo试着运行&#xff0c; 步骤三&#xff1a;查看自己需要的配置&#xff0c; 下面是我的…

保姆级 Keras 实现 Faster R-CNN 十三 (训练)

保姆级 Keras 实现 Faster R-CNN 十三 训练 一. 将 Faster R-CNN 包装成一个类二. 修改模型结构1. 修改 input_reader 函数2. 增加 RoiLabelLayer 层 三. 损失函数1. 自定义损失函数2. 自定义精度评价函数 四. 模型编译五. 模型训练六. 预训练模型七. 保存模型与参数八. 代码下…

MySQL高可用

目录 MySQL高可用方案 1、MHA架构&#xff08;单主&#xff09; MHA的工作原理 MHA 架构的优点 MHA 架构的缺点 2、MHA架构的部署 1&#xff09;关闭防火墙和selinux 2&#xff09;分别修改master和slave1&#xff0c;slave2的主机名 3&#xff09;修改master主库服务…

(09_22)【有奖体验】轻点鼠标,让古籍数字化“重生_

卷帙浩繁的古籍是古典文化的载体&#xff0c;珍贵的古籍往往很难轻易示人&#xff0c;数字化是解决古籍‘藏’与‘用’之间矛盾的最好方式&#xff0c;函数计算联合开发者宋杰开发“古籍识别“应用&#xff0c;希望更多开发者行动起来&#xff0c;用Serverless AI 让古籍“活”…

2023蓝帽杯南部赛区半决赛取证复现

首先嗷&#xff0c;仅代表个人评价一下就是说赛委会在出题的时候不严谨&#xff0c;我一度怀疑我的语文阅读能力有问题&#xff0c;但是呢&#xff0c;这次的取证题目虽然不是很难&#xff0c;但是有些地方我也是依旧没有找到&#xff0c;说了这么多&#xff0c;接下来&#xf…

Qt地铁智慧换乘系统浅学( 三 )最少路径和最少换乘实现

本算法全都基于广度优先 概念最短路径实现所用容器算法思路 最少换乘实现所需容器算法思路 成果展示代码实现判断是最短路径还是最少换乘最短路径代码实现最少换乘代码实现根据所得List画出线路 ui界面的维护&#xff08;前提条件&#xff09;界面初始化combox控件建立槽函数 概…

Java中的数组

1.数组的概念 数组概念&#xff1a; 数组就是用于存储数据的长度固定的容器&#xff0c;保证多个数据的数据类型要一致。 百度百科中对数组的定义&#xff1a; 所谓数组(array)&#xff0c;就是相同数据类型的元素按一定顺序排列的集合&#xff0c;就是把有限个类型相同的变…