当前位置: 首页 > news >正文

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>

效果

在这里插入图片描述

相关文章:

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

我们在用手机查看网页时可以通过传入经纬度去设置目的地然后跳转到对应的地图导航软件&#xff0c;如果没有下载软件则会跳转到下载界面 注意&#xff1a; 高德地图是一定会跳转到一个新网页然后去询问用户是否需要打开软件百度和腾讯地图是直接调用软件的这个方法有缺陷&…...

今天聊一聊高性能系统架构设计是什么样的

Java全能学习面试指南&#xff1a;https://javaxiaobear.cn 今天聊一聊大家常听到的高性能系统架构。 高性能系统架构&#xff0c;主要包括两部分内容&#xff0c;性能测试与性能优化。性能优化又可以细分为硬件优化、中间件优化、架构优化及代码优化&#xff0c;知识架构图如…...

鼠标不动了怎么办?3招解决问题!

“这是怎么回事呢&#xff1f;我的鼠标怎么会用着用着就突然不动了呢&#xff1f;现在有一些比较重要的工作要处理。请问有什么方法可以快速解决这个问题吗&#xff1f;” 随着电脑在我们日常生活和工作中的广泛应用&#xff0c;鼠标是我们操作电脑不可或缺的工具之一。但是&am…...

2023-09-23力扣每日一题

链接&#xff1a; 1993. 树上的操作 题意 **Lock&#xff1a;**指定用户给指定节点 上锁 &#xff0c;上锁后其他用户将无法给同一节点上锁。只有当节点处于未上锁的状态下&#xff0c;才能进行上锁操作。**Unlock&#xff1a;**指定用户给指定节点 解锁 &#xff0c;只有当…...

C#中使用Newtonsoft.Charp实现Json对象序列化与反序列化

场景 C#中使用Newtonsoft.Json实现对Json字符串的解析&#xff1a; C#中使用Newtonsoft.Json实现对Json字符串的解析_霸道流氓气质的博客-CSDN博客 上面讲的对JSON字符串进行解析&#xff0c;实际就是JSON对象的反序列化。 在与第三方进行交互时常需要封装对象&#xff0c;…...

Golang开发--互斥锁和读写锁

互斥锁&#xff08;Mutex&#xff09; 互斥锁&#xff08;Mutex&#xff09;是一种并发控制机制&#xff0c;用于保护共享资源的访问。互斥锁用于确保在任何给定时间只有一个 goroutine&#xff08;Go 语言中的并发执行单元&#xff09;可以访问被保护的共享资源&#xff0c;从…...

Springboot 集成WebSocket作为客户端,含重连接功能,开箱即用

使用演示 public static void main(String[] args) throws Exception{//初始化socket客户端BaseWebSocketClient socketClient BaseWebSocketClient.init("传入链接");//发送消息socketClient.sendMessage("填写需要发送的消息", (receive) -> {//这里…...

java调整字符串

package 字符串练习;public class 调整字符串 {/* 如果调整成功则给提示,返回不成功也给提示调整 例如:abcde -> bcdea -> cdeab 就是把第一个值放到最后的位置上现在是给定两个字符串, 选定其中一个进行调整, (我们想一下,如果调整字符串的长度次,那不就是返回到原来的字…...

2023-9

内核向应用层发送netlink单播消息&#xff1a; nlmsg_unicast -> netlink_unicast -> netlink_sendskb -> __netlink_sendskb -> 把skb链入struct sock 的 sk_receive_queue 链表中&#xff0c;再调用sk->sk_data_ready(sk); -> sock_def_readable -> wak…...

软考高级+系统架构设计师教程+第二版新版+电子版pdf

注意&#xff01;&#xff01;&#xff01; 系统架构设计师出新版教程啦&#xff0c;2022年11月出版。所以今年下半年是新版第一次考试&#xff0c;不要再复习老版教程了&#xff0c;内容改动挺大的。 【内容简介】系统架构设计师教程&#xff08;第2版&#xff09;作为全国计…...

【产品运营】如何提升B端产品竞争力(下)

“好产品不是能力内核&#xff0c;做好产品的流程才是” 一、建立需求池和需求反馈渠道 需求池管理是B端产品进化最重要的环节&#xff0c;它的重要性远超产品设计、开发等其他环节。 维护需求池有主动和被动两种。 主动维护是产品经理在参与售前、迭代、交付、售后、竞品分…...

uniapp 微信小程序使用echarts

本文目的&#xff1a;通过分包的方式&#xff0c;尽可能在微信小程序中使用最新的echarts。 当然你也可以直接使用现成的uchart或者市场里别人封好的echarts. 准备工作 下载echarts-for-weixin源码。 复制ec-canvas文件夹以及下属文件&#xff0c;在uniapp项目中与pages同级的地…...

【漏洞复现】企望制造 ERP命令执行

漏洞描述 由于企望制造 ERP comboxstore.action接口权限设置不当&#xff0c;默认的配置可执行任意SQL语句&#xff0c;利用xp_cmdshell函数可远程执行命令&#xff0c;未经认证的攻击者可通过该漏洞获取服务器权限。 免责声明 技术文章仅供参考&#xff0c;任何个人和组织…...

2023 “华为杯” 中国研究生数学建模竞赛(E题)深度剖析|数学建模完整代码+建模过程全解全析

​ 问题一 血肿扩张风险相关因素探索建模 思路&#xff1a; 根据题目要求,首先需要判断每个患者是否发生了血肿扩张事件。根据定义,如果后续检查的血肿体积比首次检查增加≥6 mL或≥33%,则判断为发生了血肿扩张。 具体判断步骤: (1) 从表1中提取每个患者的入院首次影像检查…...

【腾讯云国际站】CDN内容分发网络特性介绍

为什么使用腾讯云国际站 CDN 内容分发网络&#xff1f; 当用户直接访问源站中的静态内容时&#xff0c;可能面临的体验问题&#xff1a; 客户离服务器越远&#xff0c;访问速度越慢。客户数量越多&#xff0c;网络带宽费用越高。跨境用户访问体验较差。 腾讯云国际站CDN 如何改…...

【工业机器人视觉】

工业机器人视觉 工业机器人的定位、抓取任务是工业生产线上一项重要的应用&#xff0c;一般通过预先示教的方式让机器人执行预定的指令动作。但是&#xff0c;一旦工件的状态发生改变时&#xff0c;机器人便无法完成工作任务。区别&#xff1a;就像人睁眼走直线和闭眼走直线。…...

跨域(浏览器)

跨域问题 是前端开发中常遇到的一个挑战。由于浏览器的同源策略限制&#xff0c;前端在发起异步请求时会受到限制&#xff0c;只能向相同源&#xff08;域名、协议和端口号都相同&#xff09;的服务器发送请求。当请求的目标服务器与当前页面的源不一致时&#xff0c;就会触发…...

Leetcode 2866. Beautiful Towers II

Leetcode 2866. Beautiful Towers II 1. 解题思路2. 代码实现 题目链接&#xff1a;2866. Beautiful Towers II 1. 解题思路 这一题其实思路上还是比较明显的&#xff0c;就是一个单调数组的问题&#xff0c;问题在于说如果具体去设计这个单调数组。 我们从题目出发&#x…...

电脑C盘爆红怎么办?(小白篇)

文章目录 前言&#xff1a;1、清理临时和系统文件2、更改电脑默认软件安装位置3、微信、QQ文件存储路径放在其它盘4、卸载一些不常用的软件彩蛋 前言&#xff1a; C盘作为电脑的系统盘&#xff0c;如果出现爆满或者剩余空间很小整个C盘变红&#xff0c;这样会导致电脑系统运行…...

Office Xml 2003转XLSX

一、使用到的依赖包 1、xelem-3.1.jar 下载地址&#xff1a;管网下载地址 2、poi-3.17.jar 下载地址&#xff1a;https://mvnrepository.com/artifact/org.apache.poi/poi 二、实现方法 1、Xml2003公式转XLSX公式算法 &#xff08;1&#xff09;Xml2003函数格式 SUM(R[-1…...

MongoDB学习和应用(高效的非关系型数据库)

一丶 MongoDB简介 对于社交类软件的功能&#xff0c;我们需要对它的功能特点进行分析&#xff1a; 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具&#xff1a; mysql&#xff1a;关系型数据库&am…...

Redis相关知识总结(缓存雪崩,缓存穿透,缓存击穿,Redis实现分布式锁,如何保持数据库和缓存一致)

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

全面解析各类VPN技术:GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec&#xff1f; IPsec VPN 5.1 IPsec传输模式&#xff08;Transport Mode&#xff09; 5.2 IPsec隧道模式&#xff08;Tunne…...

Go 语言并发编程基础:无缓冲与有缓冲通道

在上一章节中&#xff0c;我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道&#xff0c;它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好&#xff0…...

基于IDIG-GAN的小样本电机轴承故障诊断

目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) ​梯度归一化(Gradient Normalization)​​ (2) ​判别器梯度间隙正则化(Discriminator Gradient Gap Regularization)​​ (3) ​自注意力机制(Self-Attention)​​ 3. 完整损失函数 二…...

CSS | transition 和 transform的用处和区别

省流总结&#xff1a; transform用于变换/变形&#xff0c;transition是动画控制器 transform 用来对元素进行变形&#xff0c;常见的操作如下&#xff0c;它是立即生效的样式变形属性。 旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜 skewX(角度…...

MySQL 8.0 事务全面讲解

以下是一个结合两次回答的 MySQL 8.0 事务全面讲解&#xff0c;涵盖了事务的核心概念、操作示例、失败回滚、隔离级别、事务性 DDL 和 XA 事务等内容&#xff0c;并修正了查看隔离级别的命令。 MySQL 8.0 事务全面讲解 一、事务的核心概念&#xff08;ACID&#xff09; 事务是…...