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

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时&#xff0c;有时候会遇到需要开发地图和导航的功能&#xff0c;这些方法其实微信小程序的API已经帮我们封装好了 详见&#xff1a;微信小程序开发文档 接下来我们就演示如何用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&#xff1f; append了的4个元素&…...

HTTP 协商缓存 Last-Modified,If-Modified-Since

浏览器第一次跟服务器请求一个资源&#xff0c;服务器在返回这个资源的同时&#xff0c;在respone header加上Last-Modified属性&#xff08;表示这个资源在服务器上的最后修改时间&#xff09;&#xff1a; ----------------------------------------------------------------…...

零基础教程:Yolov5模型改进-添加13种注意力机制

1.准备工作 先给出13种注意力机制的下载地址&#xff1a; https://github.com/z1069614715/objectdetection_script 2.加入注意力机制 1.以添加SimAM注意力机制为例&#xff08;不需要接收通道数的注意力机制&#xff09; 1.在models文件下新建py文件&#xff0c;取名叫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&#xff0c;不成功&#xff0c;提示如下。 按网上说的&#xff1a;apt-get update ,apt-get upgrade 后都无效果。 apt-cache search get 搜索后&#xff0c;发现资源链接里最新的也只有4.8.4所以不行。 需要更新资源链接&#xff0c;镜像地…...

AndroidUtil - 强大易用的安卓工具类库

官网 https://github.com/Blankj/AndroidUtilCode/blob/master/README-CN.md 项目介绍 AndroidUtilCode &#x1f525; 是一个强大易用的安卓工具类库&#xff0c;它合理地封装了安卓开发中常用的函数&#xff0c;具有完善的 Demo 和单元测试&#xff0c;利用其封装好的 API…...

[多态设计模式]枚举

背景&#xff1a; 游戏服务器中&#xff0c;多态可以说体现的淋漓尽致。 如&#xff1a; 1.开启条件。有的系统是根据玩家等级&#xff0c;有的是根据通关第几关。 2.商店可能有不同类型的商店。 3.任务系统中&#xff0c;不同的计数类型&#xff0c;不同的任务目标类型。…...

【QT】QRadioButton的使用(17)

QRadioButton这个控件在实际项目中多用于多个QRadioButton控件选择其中一个这样的方式去执行&#xff0c;那么&#xff0c;今天这节就通过几个简单的例子来好好了解下QRadioButton的一个使用。 一.环境配置 1.python 3.7.8 可直接进入官网下载安装&#xff1a;Download Pyt…...

力扣:105. 从前序与中序遍历序列构造二叉树(Python3)

题目&#xff1a; 给定两个整数数组 preorder 和 inorder &#xff0c;其中 preorder 是二叉树的先序遍历&#xff0c; inorder 是同一棵树的中序遍历&#xff0c;请构造二叉树并返回其根节点。 来源&#xff1a;力扣&#xff08;LeetCode&#xff09; 链接&#xff1a;力扣&am…...

【含java2023面试题】HashMap、HashTable、ConcurrentHashMap

作为Java中最常用的Map集合&#xff0c;HashMap、HashTable和ConcurrentHashMap都是线程安全的&#xff0c;但它们之间有什么区别呢&#xff1f;在本文中&#xff0c;我们将深入探讨这三种Map集合的区别&#xff0c;并通过Java代码示例来演示它们之间的差异。 AI绘画关于SD,MJ…...

AT24C02芯片

AT24C02简介&#xff1a; AT24C01/02/04/08/16...是一个 1K/2K/4K/8K/16K 位串行 CMOS内部有9个字节&#xff1b; 该器件通过 I2C 总线接口进行 操作&#xff0c;它有一个专门的写保护功能&#xff1b; 基于51 他有这个芯片操作 时序&#xff1a; AT24C02软件编程&#xff1a; …...

Python+Django前后端分离

程序示例精选 PythonDjango前后端分离 如需安装运行环境或远程调试&#xff0c;见文章底部个人QQ名片&#xff0c;由专业技术人员远程协助&#xff01; 前言 这篇博客针对《PythonDjango前后端分离》编写代码&#xff0c;代码整洁&#xff0c;规则&#xff0c;易读。 学习与应…...

win11系统固定到快速访问的文件夹无法调整顺序的问题

最近在使用win11系统时&#xff0c;固定到快速访问的文件夹无法调整顺序。网上搜了一大圈没有对应的解决方法&#xff0c;柳暗花明&#xff0c;在博主yin0hao的一篇文章中找到了类似的&#xff0c;跟着做了一下&#xff0c;结果问题也解决了。在此记录。 在文件资源管理器地址…...

短视频矩阵系统,短视频矩阵源码技术开发

开发短视频矩阵系统的源码需要以下步骤&#xff1a; 确定系统需求&#xff1a;根据客户的需求&#xff0c;确定系统的功能和特点&#xff0c;例如用户注册登录、视频上传、视频浏览、评论点赞等。 设计系统架构&#xff1a;根据系统需求&#xff0c;设计系统的整体架构&#x…...

Flask 数据库 连接池、DBUtils、http 连接池

1、DBUtils 简介、使用 DBUtils 简介 DBUtils 是一套用于管理 数据库 "连接池" 的Python包&#xff0c;为 "高频度、高并发" 的数据库访问提供更好的性能&#xff0c;可以自动管理连接对象的创建和释放。并允许对非线程安全的数据库接口进行线程安全包装…...

Day 01 python学习笔记

1、引入 让我们先写第一个python程序&#xff08;如果是纯小白的话&#xff09; 因为我们之前安装了python解释器 所以我们直接win r ---->输入cmd&#xff08;打开运行终端&#xff09; >python #&#xff08;在终端中打开python解释器&#xff09;>>>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虚拟实训教学降低培训等待周期

林业种植管理在保护水土流失、气候变化及经济社会发展中发挥重要的作用&#xff0c;林业教学往往需要进入林区进行实操察验&#xff0c;在安全性、时间及效率上难以把控&#xff0c;因此有更多林业畜牧院校创新性地引进VR虚拟现实技术。 在林业领域&#xff0c;实地调查是获取准…...

LabVIEW在运行时调整表控件列宽

LabVIEW在运行时调整表控件列宽 如何在LabIEW中运行时调整表控件的列宽大小&#xff1f; 在VI运行时&#xff0c;有两种不同的方法可以更改表中列的宽度。首先&#xff0c;可以使用鼠标手动更改它们;其次&#xff0c;可以从框图中以编程方式更改它们。 手动更改列宽 只有在…...

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端&#xff0c;它允许HTTP与Elasticsearch 集群通信&#xff0c;而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级&#xff…...

装饰模式(Decorator Pattern)重构java邮件发奖系统实战

前言 现在我们有个如下的需求&#xff0c;设计一个邮件发奖的小系统&#xff0c; 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其…...

Ubuntu系统下交叉编译openssl

一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机&#xff1a;Ubuntu 20.04.6 LTSHost&#xff1a;ARM32位交叉编译器&#xff1a;arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...

使用分级同态加密防御梯度泄漏

抽象 联邦学习 &#xff08;FL&#xff09; 支持跨分布式客户端进行协作模型训练&#xff0c;而无需共享原始数据&#xff0c;这使其成为在互联和自动驾驶汽车 &#xff08;CAV&#xff09; 等领域保护隐私的机器学习的一种很有前途的方法。然而&#xff0c;最近的研究表明&…...

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

蓝桥杯 2024 15届国赛 A组 儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡&#xff0c;轻快的音乐在耳边持续回荡&#xff0c;小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下&#xff0c;六一来了。 今天是六一儿童节&#xff0c;小蓝老师为了让大家在节…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序

一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

基于matlab策略迭代和值迭代法的动态规划

经典的基于策略迭代和值迭代法的动态规划matlab代码&#xff0c;实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...

如何在网页里填写 PDF 表格?

有时候&#xff0c;你可能希望用户能在你的网站上填写 PDF 表单。然而&#xff0c;这件事并不简单&#xff0c;因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件&#xff0c;但原生并不支持编辑或填写它们。更糟的是&#xff0c;如果你想收集表单数据&#xff…...