WEB使用VUE3实现地图导航跳转
我们在用手机查看网页时可以通过传入经纬度去设置目的地然后跳转到对应的地图导航软件,如果没有下载软件则会跳转到下载界面
注意:
- 高德地图是一定会跳转到一个新网页然后去询问用户是否需要打开软件
- 百度和腾讯地图是直接调用软件的
- 这个方法有缺陷,因为我们判断用户是否下载软件是通过监听用户的行为,判断页面是否发生变化来决定的,但是某些移动操作系统,如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实现地图导航跳转
我们在用手机查看网页时可以通过传入经纬度去设置目的地然后跳转到对应的地图导航软件,如果没有下载软件则会跳转到下载界面 注意: 高德地图是一定会跳转到一个新网页然后去询问用户是否需要打开软件百度和腾讯地图是直接调用软件的这个方法有缺陷&…...
今天聊一聊高性能系统架构设计是什么样的
Java全能学习面试指南:https://javaxiaobear.cn 今天聊一聊大家常听到的高性能系统架构。 高性能系统架构,主要包括两部分内容,性能测试与性能优化。性能优化又可以细分为硬件优化、中间件优化、架构优化及代码优化,知识架构图如…...
鼠标不动了怎么办?3招解决问题!
“这是怎么回事呢?我的鼠标怎么会用着用着就突然不动了呢?现在有一些比较重要的工作要处理。请问有什么方法可以快速解决这个问题吗?” 随着电脑在我们日常生活和工作中的广泛应用,鼠标是我们操作电脑不可或缺的工具之一。但是&am…...
2023-09-23力扣每日一题
链接: 1993. 树上的操作 题意 **Lock:**指定用户给指定节点 上锁 ,上锁后其他用户将无法给同一节点上锁。只有当节点处于未上锁的状态下,才能进行上锁操作。**Unlock:**指定用户给指定节点 解锁 ,只有当…...
C#中使用Newtonsoft.Charp实现Json对象序列化与反序列化
场景 C#中使用Newtonsoft.Json实现对Json字符串的解析: C#中使用Newtonsoft.Json实现对Json字符串的解析_霸道流氓气质的博客-CSDN博客 上面讲的对JSON字符串进行解析,实际就是JSON对象的反序列化。 在与第三方进行交互时常需要封装对象,…...
Golang开发--互斥锁和读写锁
互斥锁(Mutex) 互斥锁(Mutex)是一种并发控制机制,用于保护共享资源的访问。互斥锁用于确保在任何给定时间只有一个 goroutine(Go 语言中的并发执行单元)可以访问被保护的共享资源,从…...
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单播消息: nlmsg_unicast -> netlink_unicast -> netlink_sendskb -> __netlink_sendskb -> 把skb链入struct sock 的 sk_receive_queue 链表中,再调用sk->sk_data_ready(sk); -> sock_def_readable -> wak…...
软考高级+系统架构设计师教程+第二版新版+电子版pdf
注意!!! 系统架构设计师出新版教程啦,2022年11月出版。所以今年下半年是新版第一次考试,不要再复习老版教程了,内容改动挺大的。 【内容简介】系统架构设计师教程(第2版)作为全国计…...
【产品运营】如何提升B端产品竞争力(下)
“好产品不是能力内核,做好产品的流程才是” 一、建立需求池和需求反馈渠道 需求池管理是B端产品进化最重要的环节,它的重要性远超产品设计、开发等其他环节。 维护需求池有主动和被动两种。 主动维护是产品经理在参与售前、迭代、交付、售后、竞品分…...
uniapp 微信小程序使用echarts
本文目的:通过分包的方式,尽可能在微信小程序中使用最新的echarts。 当然你也可以直接使用现成的uchart或者市场里别人封好的echarts. 准备工作 下载echarts-for-weixin源码。 复制ec-canvas文件夹以及下属文件,在uniapp项目中与pages同级的地…...
【漏洞复现】企望制造 ERP命令执行
漏洞描述 由于企望制造 ERP comboxstore.action接口权限设置不当,默认的配置可执行任意SQL语句,利用xp_cmdshell函数可远程执行命令,未经认证的攻击者可通过该漏洞获取服务器权限。 免责声明 技术文章仅供参考,任何个人和组织…...
2023 “华为杯” 中国研究生数学建模竞赛(E题)深度剖析|数学建模完整代码+建模过程全解全析
问题一 血肿扩张风险相关因素探索建模 思路: 根据题目要求,首先需要判断每个患者是否发生了血肿扩张事件。根据定义,如果后续检查的血肿体积比首次检查增加≥6 mL或≥33%,则判断为发生了血肿扩张。 具体判断步骤: (1) 从表1中提取每个患者的入院首次影像检查…...
【腾讯云国际站】CDN内容分发网络特性介绍
为什么使用腾讯云国际站 CDN 内容分发网络? 当用户直接访问源站中的静态内容时,可能面临的体验问题: 客户离服务器越远,访问速度越慢。客户数量越多,网络带宽费用越高。跨境用户访问体验较差。 腾讯云国际站CDN 如何改…...
【工业机器人视觉】
工业机器人视觉 工业机器人的定位、抓取任务是工业生产线上一项重要的应用,一般通过预先示教的方式让机器人执行预定的指令动作。但是,一旦工件的状态发生改变时,机器人便无法完成工作任务。区别:就像人睁眼走直线和闭眼走直线。…...
跨域(浏览器)
跨域问题 是前端开发中常遇到的一个挑战。由于浏览器的同源策略限制,前端在发起异步请求时会受到限制,只能向相同源(域名、协议和端口号都相同)的服务器发送请求。当请求的目标服务器与当前页面的源不一致时,就会触发…...
Leetcode 2866. Beautiful Towers II
Leetcode 2866. Beautiful Towers II 1. 解题思路2. 代码实现 题目链接:2866. Beautiful Towers II 1. 解题思路 这一题其实思路上还是比较明显的,就是一个单调数组的问题,问题在于说如果具体去设计这个单调数组。 我们从题目出发&#x…...
电脑C盘爆红怎么办?(小白篇)
文章目录 前言:1、清理临时和系统文件2、更改电脑默认软件安装位置3、微信、QQ文件存储路径放在其它盘4、卸载一些不常用的软件彩蛋 前言: C盘作为电脑的系统盘,如果出现爆满或者剩余空间很小整个C盘变红,这样会导致电脑系统运行…...
Office Xml 2003转XLSX
一、使用到的依赖包 1、xelem-3.1.jar 下载地址:管网下载地址 2、poi-3.17.jar 下载地址:https://mvnrepository.com/artifact/org.apache.poi/poi 二、实现方法 1、Xml2003公式转XLSX公式算法 (1)Xml2003函数格式 SUM(R[-1…...
Linux云原生安全:零信任架构与机密计算
Linux云原生安全:零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言:云原生安全的范式革命 随着云原生技术的普及,安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测,到2025年,零信任架构将成为超…...
【OSG学习笔记】Day 16: 骨骼动画与蒙皮(osgAnimation)
骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术,它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton):由层级结构的骨头组成,类似于人体骨骼蒙皮 (Mesh Skinning):将模型网格顶点绑定到骨骼上,使骨骼移动…...
Unit 1 深度强化学习简介
Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库,例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体,比如 SnowballFight、Huggy the Do…...
管理学院权限管理系统开发总结
文章目录 🎓 管理学院权限管理系统开发总结 - 现代化Web应用实践之路📝 项目概述🏗️ 技术架构设计后端技术栈前端技术栈 💡 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 🗄️ 数据库设…...
AGain DB和倍数增益的关系
我在设置一款索尼CMOS芯片时,Again增益0db变化为6DB,画面的变化只有2倍DN的增益,比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析: 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...
免费PDF转图片工具
免费PDF转图片工具 一款简单易用的PDF转图片工具,可以将PDF文件快速转换为高质量PNG图片。无需安装复杂的软件,也不需要在线上传文件,保护您的隐私。 工具截图 主要特点 🚀 快速转换:本地转换,无需等待上…...
CSS | transition 和 transform的用处和区别
省流总结: transform用于变换/变形,transition是动画控制器 transform 用来对元素进行变形,常见的操作如下,它是立即生效的样式变形属性。 旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜 skewX(角度…...
【Elasticsearch】Elasticsearch 在大数据生态圈的地位 实践经验
Elasticsearch 在大数据生态圈的地位 & 实践经验 1.Elasticsearch 的优势1.1 Elasticsearch 解决的核心问题1.1.1 传统方案的短板1.1.2 Elasticsearch 的解决方案 1.2 与大数据组件的对比优势1.3 关键优势技术支撑1.4 Elasticsearch 的竞品1.4.1 全文搜索领域1.4.2 日志分析…...
保姆级【快数学会Android端“动画“】+ 实现补间动画和逐帧动画!!!
目录 补间动画 1.创建资源文件夹 2.设置文件夹类型 3.创建.xml文件 4.样式设计 5.动画设置 6.动画的实现 内容拓展 7.在原基础上继续添加.xml文件 8.xml代码编写 (1)rotate_anim (2)scale_anim (3)translate_anim 9.MainActivity.java代码汇总 10.效果展示 逐帧…...
java高级——高阶函数、如何定义一个函数式接口类似stream流的filter
java高级——高阶函数、stream流 前情提要文章介绍一、函数伊始1.1 合格的函数1.2 有形的函数2. 函数对象2.1 函数对象——行为参数化2.2 函数对象——延迟执行 二、 函数编程语法1. 函数对象表现形式1.1 Lambda表达式1.2 方法引用(Math::max) 2 函数接口…...
