Uni-app 调用微信地图导航功能【有图】
前言
我们在使用uni-app时,有时候会遇到需要开发地图和导航的功能,这些方法其实微信小程序的API已经帮我们封装好了
详见:微信小程序开发文档
接下来我们就演示如何用uni-app来使用他们
使用
<template><view><button type="primary" @click="chooseLocation" class="acc">选择位置 </button>经度:<span>{{longitude==' ' || longitude==null ?'/':longitude}}</span>纬度:<span>{{latitude==' ' || latitude==null ?'/':latitude}}</span><button type="default" @click="nav">导航 </button></view>
</template><script setup>import { getCurrentInstance, ref } from "vue";import { onBackPress } from "@dcloudio/uni-app";const { proxy } = getCurrentInstance();const name = ref(null)const address = ref(null)const latitude = ref(null)const longitude = ref(null)function nav() {uni.openLocation({latitude: latitude.value,longitude: longitude.value,name: name.value,scale: 15,address: address.value,success: function(res) {proxy.$modal.msgSuccess('打开地图成功!', res);},fail: function(error) {proxy.$modal.msgError('打开地图失败!', error);},});}function chooseLocation() {uni.chooseLocation({success: function(res) {name.value = res.name; // 位置名称address.value = res.address; // 详细地址latitude.value = res.latitude; // 纬度longitude.value = res.longitude; // 经度console.log('name', name.value);console.log('address', address.value);console.log('latitude', latitude.value);console.log('longitude', longitude.value);},fail: function(error) {console.error('选择位置失败', error);},});}// 获取当前位置的经纬度uni.getLocation({success: function(res) {var latitude = res.latitude; // 纬度var longitude = res.longitude; // 经度console.log('latitude', latitude);console.log('longitude', longitude);// 在这里可以将经纬度转换为地址信息,后续步骤中会介绍如何实现这一功能。},fail: function(error) {console.error('获取地理位置失败', error);},});// 页面加载onBackPress(() => {proxy.$tab.switchTab('/pages/office/index');return true;});
</script><style>.acc {margin-bottom: 20px;}
</style>
效果
进去后看到的效果

点击选择位置后

点击导航后

点击右下角的位置后,调用地图功能,会根据手机下载的软件来显示
如果手机内没有下载软件,会有腾讯地图和谷歌地图选项,点击会跳转到下载界面

相关文章:
Uni-app 调用微信地图导航功能【有图】
前言 我们在使用uni-app时,有时候会遇到需要开发地图和导航的功能,这些方法其实微信小程序的API已经帮我们封装好了 详见:微信小程序开发文档 接下来我们就演示如何用uni-app来使用他们 使用 <template><view><button type…...
Golang slice 通过growslice调用nextslicecap计算扩容
先来看一段代码 code: e : []int64{1, 2, 3}fmt.Println("cap of e before:", cap(e))e append(e, 4, 5, 6, 7)fmt.Println("cap of e after:", cap(e))output:cap of e before: 3 cap of e after: 8 为什么容量是8? append了的4个元素&…...
HTTP 协商缓存 Last-Modified,If-Modified-Since
浏览器第一次跟服务器请求一个资源,服务器在返回这个资源的同时,在respone header加上Last-Modified属性(表示这个资源在服务器上的最后修改时间): ----------------------------------------------------------------…...
零基础教程:Yolov5模型改进-添加13种注意力机制
1.准备工作 先给出13种注意力机制的下载地址: https://github.com/z1069614715/objectdetection_script 2.加入注意力机制 1.以添加SimAM注意力机制为例(不需要接收通道数的注意力机制) 1.在models文件下新建py文件,取名叫Sim…...
vue截取地址参数
const getQueryValueFn () >{// 获取当前页面的URLconst currentURL window.location.href;//创建一个URL对象来解析当前URL。URL对象提供了方便的属性和方法来处理URL的各个部分const url new URL(currentURL);// 使用URLSearchParams获取查询参数const queryParams ne…...
ubuntu 14.04更新GCC版本
按最基本的apt-get install gcc-8,不成功,提示如下。 按网上说的:apt-get update ,apt-get upgrade 后都无效果。 apt-cache search get 搜索后,发现资源链接里最新的也只有4.8.4所以不行。 需要更新资源链接,镜像地…...
AndroidUtil - 强大易用的安卓工具类库
官网 https://github.com/Blankj/AndroidUtilCode/blob/master/README-CN.md 项目介绍 AndroidUtilCode 🔥 是一个强大易用的安卓工具类库,它合理地封装了安卓开发中常用的函数,具有完善的 Demo 和单元测试,利用其封装好的 API…...
[多态设计模式]枚举
背景: 游戏服务器中,多态可以说体现的淋漓尽致。 如: 1.开启条件。有的系统是根据玩家等级,有的是根据通关第几关。 2.商店可能有不同类型的商店。 3.任务系统中,不同的计数类型,不同的任务目标类型。…...
【QT】QRadioButton的使用(17)
QRadioButton这个控件在实际项目中多用于多个QRadioButton控件选择其中一个这样的方式去执行,那么,今天这节就通过几个简单的例子来好好了解下QRadioButton的一个使用。 一.环境配置 1.python 3.7.8 可直接进入官网下载安装:Download Pyt…...
力扣:105. 从前序与中序遍历序列构造二叉树(Python3)
题目: 给定两个整数数组 preorder 和 inorder ,其中 preorder 是二叉树的先序遍历, inorder 是同一棵树的中序遍历,请构造二叉树并返回其根节点。 来源:力扣(LeetCode) 链接:力扣&am…...
【含java2023面试题】HashMap、HashTable、ConcurrentHashMap
作为Java中最常用的Map集合,HashMap、HashTable和ConcurrentHashMap都是线程安全的,但它们之间有什么区别呢?在本文中,我们将深入探讨这三种Map集合的区别,并通过Java代码示例来演示它们之间的差异。 AI绘画关于SD,MJ…...
AT24C02芯片
AT24C02简介: AT24C01/02/04/08/16...是一个 1K/2K/4K/8K/16K 位串行 CMOS内部有9个字节; 该器件通过 I2C 总线接口进行 操作,它有一个专门的写保护功能; 基于51 他有这个芯片操作 时序: AT24C02软件编程: …...
Python+Django前后端分离
程序示例精选 PythonDjango前后端分离 如需安装运行环境或远程调试,见文章底部个人QQ名片,由专业技术人员远程协助! 前言 这篇博客针对《PythonDjango前后端分离》编写代码,代码整洁,规则,易读。 学习与应…...
win11系统固定到快速访问的文件夹无法调整顺序的问题
最近在使用win11系统时,固定到快速访问的文件夹无法调整顺序。网上搜了一大圈没有对应的解决方法,柳暗花明,在博主yin0hao的一篇文章中找到了类似的,跟着做了一下,结果问题也解决了。在此记录。 在文件资源管理器地址…...
短视频矩阵系统,短视频矩阵源码技术开发
开发短视频矩阵系统的源码需要以下步骤: 确定系统需求:根据客户的需求,确定系统的功能和特点,例如用户注册登录、视频上传、视频浏览、评论点赞等。 设计系统架构:根据系统需求,设计系统的整体架构&#x…...
Flask 数据库 连接池、DBUtils、http 连接池
1、DBUtils 简介、使用 DBUtils 简介 DBUtils 是一套用于管理 数据库 "连接池" 的Python包,为 "高频度、高并发" 的数据库访问提供更好的性能,可以自动管理连接对象的创建和释放。并允许对非线程安全的数据库接口进行线程安全包装…...
Day 01 python学习笔记
1、引入 让我们先写第一个python程序(如果是纯小白的话) 因为我们之前安装了python解释器 所以我们直接win r ---->输入cmd(打开运行终端) >python #(在终端中打开python解释器)>>>pri…...
CSharp Library develop histroy
1. .NET FRAMEWORK 发展版本 版本 完整版本号 发行日期 Visual Studio Windows 默认安装 1.0 1.0.3705.0 2002-02-13 Visual Studio .NET 2002 Windows XP Media Center Edition Windows XP Tablet PC Edition 1.1 1.1.4322.573 2003-04-24 Visual Studio .NET 2…...
林木种苗生产vr虚拟实训教学降低培训等待周期
林业种植管理在保护水土流失、气候变化及经济社会发展中发挥重要的作用,林业教学往往需要进入林区进行实操察验,在安全性、时间及效率上难以把控,因此有更多林业畜牧院校创新性地引进VR虚拟现实技术。 在林业领域,实地调查是获取准…...
LabVIEW在运行时调整表控件列宽
LabVIEW在运行时调整表控件列宽 如何在LabIEW中运行时调整表控件的列宽大小? 在VI运行时,有两种不同的方法可以更改表中列的宽度。首先,可以使用鼠标手动更改它们;其次,可以从框图中以编程方式更改它们。 手动更改列宽 只有在…...
第19节 Node.js Express 框架
Express 是一个为Node.js设计的web开发框架,它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用,和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...
Oracle查询表空间大小
1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...
在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中,手势开发全攻略:
在 HarmonyOS 应用开发中,手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力,既支持点击、长按、拖拽等基础单一手势的精细控制,也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档,…...
Mybatis逆向工程,动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件
今天呢,博主的学习进度也是步入了Java Mybatis 框架,目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学,希望能对大家有所帮助,也特别欢迎大家指点不足之处,小生很乐意接受正确的建议&…...
Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)
引言:为什么 Eureka 依然是存量系统的核心? 尽管 Nacos 等新注册中心崛起,但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制,是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...
Axios请求超时重发机制
Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式: 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...
MySQL中【正则表达式】用法
MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现(两者等价),用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例: 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...
Rapidio门铃消息FIFO溢出机制
关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系,以下是深入解析: 门铃FIFO溢出的本质 在RapidIO系统中,门铃消息FIFO是硬件控制器内部的缓冲区,用于临时存储接收到的门铃消息(Doorbell Message)。…...
【JavaSE】多线程基础学习笔记
多线程基础 -线程相关概念 程序(Program) 是为完成特定任务、用某种语言编写的一组指令的集合简单的说:就是我们写的代码 进程 进程是指运行中的程序,比如我们使用QQ,就启动了一个进程,操作系统就会为该进程分配内存…...
Python 训练营打卡 Day 47
注意力热力图可视化 在day 46代码的基础上,对比不同卷积层热力图可视化的结果 import torch import torch.nn as nn import torch.optim as optim from torchvision import datasets, transforms from torch.utils.data import DataLoader import matplotlib.pypl…...
