Uniapp的App环境下使用Map获取缩放比例
概述
- 目前我试过的就是你用vue后缀是拿不到比例的你可以用nvue当然uniapp的uvue应该是更加可以的
- 我使用的是高德所以你得在高德的后台声请原生的Android的key才可以
- 如果是vue3的开发模式的话不用使用this来获取当前对象
- 使用scale对象来接受和改变缩放比例会比较友好
- 然后直接走uniapp的api通过uni来操作获取对象就可以了
操作
1. 后缀名解释
可以查看我这篇文章 Uniapp的vue、nvue、uvue后缀名区别
2. 申请高德的key和配置uniapp解析Map
可以查看这里官方解释:官方说明
3. 放弃使用this
在您的uni-app项目中,您试图通过uni.createMapContext来获取地图的缩放比例,但是遇到了问题。从您提供的代码和描述来看,可能存在几个问题,下面我将逐一分析和提供解决方案:
this上下文问题: 在Vue 3的组合式API中,您不应该使用this关键字,因为它在组合式API中未定义。您应该直接使用ref定义的响应式变量。
地图上下文创建: 在getMapScale函数中,您应该直接使用uni.createMapContext(‘mapBoday’)来创建地图上下文,而不是传入this。
4. 绑定scale
这里的主要的目的是动态获取缩放的比例
5. 使用uniapp给的地图api直接拿取地图api就可以了
省略哈
代码解释
<template><view style="" class="mapBox"><map id="mapBoday" class="mapBoday" ref="mapBoday"style="width: 800rpx; height: 800rpx; z-index: 1;position: absolute;" :show-compass="showCompass":latitude="latitude" :longitude="longitude" @markertap="onMarkerTap" :markers="markers" @click="getclick":scale="scale" @regionchange="onRegionChange"></map></view>
</template><script setup>import {ref,onMounted} from 'vue'// 定义经纬度状态const latitude = ref(28.009883);const longitude = ref(111.126059);const markers = ref([]); //地图的地址const showCompass = ref(true)const mapPlan = ref(true)const address = ref('')const scale = ref(1)const mapBoday = ref()const getclick = (e) => {console.log(e)}const onMapFinish = (e) => {console.log("更新事件", e)}const onRegionChange = (event) => {// 监听地图缩放,获取当前缩放级别console.log("监听到缩放", event, event.detail)if (event.type === 'end') {// console.log('当前缩放级别:', event.detail);// scale.value = event.detail.scale;getMapScale()}};// 获取当前缩放比例const getMapScale = () => {const mapContext = uni.createMapContext('mapBoday');mapContext.getScale({success(res) {console.log('当前缩放比例:', res.scale);scale.value = res.scale;},fail(err) {console.error('获取缩放比例失败:', err);}});};// 获取当前位置信息const getLocation = () => {uni.getLocation({type: 'gcj02', // 使用 gcj02 坐标系success: (res) => {// latitude.value = res.latitude;// longitude.value = res.longitude;address.value = res.address;// 设置标记(marker)markers.value = [{id: 1,latitude: res.latitude,longitude: res.longitude,iconPath: '../../static/icon/location.png', // 可自定义图标路径width: 10,height: 10},{id: 2,latitude: 28.009883, // 标记的经度longitude: 111.126059, // 标记的纬度iconPath: '../../static/icon/destination.png', // 自定义图标width: 10,height: 10,callout: {content: '点击导航到这里',color: '#000',fontSize: 12,borderRadius: 5,bgColor: '#fff',padding: 5,display: 'ALWAYS'}}];},fail: (err) => {console.log('获取定位失败:', err);}});};// 点击标记时的处理函数const onMarkerTap = (event) => {const markerId = event.id;const selectedMarker = markers.value.find(marker => marker.id === markerId);console.log(event, markerId, selectedMarker)if (selectedMarker) {// 打开高德地图进行导航uni.openLocation({latitude: selectedMarker.latitude,longitude: selectedMarker.longitude,name: '导航目的地', // 可选,显示在高德地图上的目的地名称address: '这里是目的地地址', // 可选,显示在高德地图上的详细地址success() {console.log('导航成功');},fail(err) {console.error('导航失败:', err);}});}};//切换视图const openMapPlan = () => {}// 组件挂载时获取地理位置onMounted(() => {getLocation();});
</script><style lang="scss" scoped>.mapBox {height: 800rpx;width: 800rpx;border: 1px solid red;}
</style>
相关文章:
Uniapp的App环境下使用Map获取缩放比例
概述 目前我试过的就是你用vue后缀是拿不到比例的你可以用nvue当然uniapp的uvue应该是更加可以的我使用的是高德所以你得在高德的后台声请原生的Android的key才可以如果是vue3的开发模式的话不用使用this来获取当前对象使用scale对象来接受和改变缩放比例会比较友好然后直接走…...
[免费]基于Python的Django在线(生鲜)商城(电子商城)管理系统【论文+源码+SQL脚本】
大家好,我是java1234_小锋老师,看到一个不错的基于Python的Django在线(生鲜)商城(电子商城)管理系统,分享下哈。 项目视频演示 【免费】基于Python的Django在线(生鲜)商城(电子商城)管理系统 Python毕业设计_哔哩哔哩_bilibili 项目介绍 随…...
Go 1.19.4 HTTP编程-Day 20
1. HTTP协议 1.1 基本介绍 HTTP协议又称超文本传输协议,属于应用层协议,在传输层使用TCP协议。HTTP协议属是无状态的,对事务处理没有记忆能力,如果需要保存状态需要引用其他技术,如Cookie。HTTP协议属是无连接的&…...
基于微软云第一个大模型程序Java和python实现
1 注册一个微软云账号 按照提示一步一步注册,注册过程中,注册微软云账号需要visa卡。可以在某宝花钱30元买下。 2 部署模型 搜索openAI 创建资源组 部署一个模型 这个后面代码会使用 3 Java 实现 pom 依赖 <dependency><groupId>com…...
【5G】5G目标和标准化 5G targets and standardization
5G标准是在第三代合作伙伴关系项目(3GPP,3rd Generation Partnership Project)中定义的,实际的标准制定工作由参与3GPP活动的区域标准机构成员共同推进。目前,超过600家公司通过各自的地区标准组织成为3GPP的成员。然而…...
KernelShark在ubuntu24.04.01的编译
KernelShark在ubuntu24.04.01的编译 写在前面具体过程装ubuntu24.04.01安装depends下载代码如何编译cmake 输出make 输出 如何安装 初步启动Add the User to the perf Group 简单的使用trace-cmd抓包 来看我的文章,必有所得。 平凡中,总有我帮您踩过的坑…...
【Flutter】WillPopScope组件-监听物理返回键事件自定义返回事件
WillPopScope(onWillPop: () async {if ( flutterWebViewPlugin ! null && await flutterWebViewPlugin.canGoBack() true) {flutterWebViewPlugin!.goBack();return false; // 阻止默认的返回行为} else {return true; // 允许默认的返回行为}},child: Scaffold(),);…...
深度学习每周学习总结J8(Inception V1 算法实战与解析 - 猴痘识别)
🍨 本文为🔗365天深度学习训练营 中的学习记录博客🍖 原作者:K同学啊 | 接辅导、项目定制 目录 0. 总结Inception V1 简介1. 设置GPU2. 导入数据及处理部分3. 划分数据集4. 模型构建部分5. 设置超参数:定义损失函数&am…...
Django模板系统
1.常用语法 Django模板中只需要记两种特殊符号: {{ }}和 {% %} {{ }}表示变量,在模板渲染的时候替换成值,{% %}表示逻辑相关的操作。 2.变量 {{ 变量名 }} 变量名由字母数字和下划线组成。 点(.)在模板语言中有…...
【JavaWeb后端学习笔记】MySQL的数据操作语言(Data Manipulation Language,DML)
MySQL DML 0、准备表结构1、添加数据1.1 指定字段添加数据(单条)1.2 全部字段添加数据(单条)1.3 指定字段添加数据(批量)1.4 全部字段添加数据(批量) 2、修改数据3、删除数据 MySQL的…...
【SpringBoot】Day10-09 动态SQL-XML文件
动态SQL-XML文件的三点规范 1.XML映射文件的名称与Mapper接口名称保持一致,并且将XML映射文件和Mapper接口放置在相同包下(同包同名)- 在项目开发当中,一般都是一个接口对应一份儿映射配置文件; 2.XML映射文件的namesp…...
Linux絮絮叨(三) Ubuntu桌面版添加中文拼音输入法
步骤很详细,直接上教程 一. 配置安装简体拼音输入法 #安装相应的平台支持包 sudo apt install ibus-gtk ibus-gtk3# 安装简体拼音输入法 sudo apt install ibus-pinyin安装完成如果下面的步骤找不到对应输入法可以重启一下,一般不需要 二. 添加简体拼音…...
rockit 学习、开发笔记(六)(VENC)
前言 上节我们讲到了VDEC解码模块,那当然少不了VENC编码模块了,一般有编解码的需求都是为了压缩视频的大小,方便减少传输所占用的带宽。 概述 VENC 模块,即视频编码模块。本模块支持多路实时编码,且每路编码独立&am…...
Python+Django框架山东济南景点数据可视化系统网站作品截图和开题报告参考
博主介绍:黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育、辅导。 所有项目都配有从入门到精通的基础知识视频课程ÿ…...
【C#】键值对的一种常见数据结构Dictionary<TKey, TValue>
在 C# 中,Dictionary<TKey, TValue> 是一个 键值对(key-value)集合,是一种非常常见的数据结构。它允许通过 键(key)来快速查找与之相关的 值(value)。你可以将其类比为一个映射…...
SQL Server:调用的目标发生了异常。(mscorlib)
我之前安装的SQL Server是2014版本,SSMS运行也很流畅,有一次有个同事让我链接云服务器SQL地址,直接报上图的错误,把我弄的一愣一愣的。 后面才发现,这是版本太低导致的,但是你如果使用Navicat是没有问题的…...
windows 上ffmpeg编译好的版本选择
1. Gyan.dev Gyan.dev 是一个广受信赖的 FFmpeg 预编译库提供者,提供多种版本的 FFmpeg,包括静态和动态链接版本。 下载链接: https://www.gyan.dev/ffmpeg/builds/ 特点: 提供最新稳定版和开发版。 支持静态和共享(动态&…...
前端工程化面试题(一)
如何使用 Docker 部署前端项目? 使用 Docker 部署前端项目通常涉及以下几个步骤: 创建项目:首先,需要在本地创建并配置好前端项目。 准备 Docker 文件: .dockerignore:这个文件用于排除不需要上传到 Dock…...
Java设计模式笔记(二)
十四、模版方法模式 1、介绍 1)模板方法模式(Template Method Pattern),又叫模板模式(Template Patern),在一个抽象类公开定义了执行它的方法的模板。它的子类可以按需重写方法实现,但调用将以抽象类中定义的方式进行。 2&…...
vscode(一)安装(ubuntu20.04)
1、更新软件包列表 sudo apt update2、安装依赖包 sudo apt install software-properties-common apt-transport-https wget3、导入Microsoft GPG密钥 wget -q https://packages.microsoft.com/keys/microsoft.asc -O- | sudo apt-key add -4、向系统添加VSCode存储库 sudo…...
C# 命名空间(Namespace)
文章目录 前言一、命名空间的定义与使用基础(一)定义语法与规则(二)调用命名空间内元素 二、using 关键字三、嵌套命名空间 前言 命名空间(Namespace)在于提供一种清晰、高效的方式,将一组名称与…...
云计算介绍_3(计算虚拟化——cpu虚拟化、内存虚拟化、io虚拟化、常见集群策略、华为FC)
计算虚拟化 1.计算虚拟化介绍1.1 计算虚拟化 分类(cpu虚拟化、内存虚拟化、IO虚拟化)1.2 cpu虚拟化1.3 内存虚拟化1.4 IO虚拟化1.5 常见的集群的策略1.6 华为FC 1.计算虚拟化介绍 1.1 计算虚拟化 分类(cpu虚拟化、内存虚拟化、IO虚拟化&#…...
Flutter开发App,编译条件下UI没问题,打包后UI出现问题
刚入门Flutter3个月,终于进入项目打包阶段,发现之前编译环境下都正常的UI,忽然有小部分出现异常,不显示UI部分了。查了2个小时都没发现原因。因为编译环境下,Android、iOS端都正常显示。但是进入打包安装后,…...
Python+OpenCV系列:Python和OpenCV的结合和发展
PythonOpenCV系列:Python和OpenCV的结合和发展 **引言****Python语言的发展****1.1 Python的诞生与发展****1.2 Python的核心特性与优势****1.3 Python的应用领域** **OpenCV的发展****2.1 OpenCV的起源与发展****2.2 OpenCV的功能特性****2.3 OpenCV的应用场景** *…...
报错 JSON.parse: expected property name or ‘}‘,JSON数据中对象的key值不为字符串
报错 JSON.parse: expected property name or ‘}’ 原因 多是因为数据转换时出错,可能是存在单引号或者对象key值不为string导致 这里记录下我遇见的问题(后端给的JSON数据里,对象key值不为string) 现在后端转换JSON数据大多…...
Flutter:商品多规格内容总结,响应式数据,高亮切换显示。
如图所示: 代码为练习时写的项目,写的一般,功能实现了,等以后再来优化。 自己模拟的数据结构 var data {id:1,name:精品小米等多种五谷杂粮精品小等多种五谷杂粮,logo:https://cdn.uviewui.com/uview/swiper/1.jpg,price:100.5…...
WPF+LibVLC开发播放器-LibVLC播放控制
接上一篇: LibVLC在C#中的使用 实现LibVLC播放器播放控制 界面 界面上添加一个Button按钮用于控制播放 <ButtonGrid.Row"1"Width"88"Height"24"Margin"10,0,0,0"HorizontalAlignment"Left"VerticalAlignme…...
Mac环境下brew安装LNMP
安装不同版本PHP 在Mac环境下同时运行多个版本的PHP,同Linux环境一样,都是将后台运行的php-fpm设置为不同的端口号,下面将已php7.2 和 php7.4为例 添加 tap 目的:homebrew仅保留最近的php版本,可能没有你需要的版本…...
nodejs后端项目使用pm2部署
nodejs后端项目使用pm2部署 安装pm2 npm install pm2 -g查看版本号 pm2 --version启动项目 pm2 start app.js# 设置别名 pm2 start app.js --name demo停止项目 pm2 stop [AppName] pm2 stop [ID]# 停止所有项目 pm2 stop all重启项目 pm2 restart [AppName] pm2 re…...
【C++】深入理解字符变量取地址的特殊性与内存管理机制详解
博客主页: [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C 文章目录 💯前言💯栈内存中的变量分配:谁先谁后?cout 的输出行为:按顺序执行,按地址递增读取代码执行顺序与内存布局的关系编译器优化的影响 &…...
【银河麒麟操作系统真实案例分享】内存黑洞导致服务器卡死分析全过程
了解更多银河麒麟操作系统全新产品,请点击访问 麒麟软件产品专区:https://product.kylinos.cn 开发者专区:https://developer.kylinos.cn 文档中心:https://documentkylinos.cn 现象描述 机房显示器连接服务器后黑屏ÿ…...
蓝桥杯软件赛系列---lesson1
🌈个人主页:羽晨同学 💫个人格言:“成为自己未来的主人~” 我们今天会再开一个系列,那就是蓝桥杯系列,我们会从最基础的开始讲起,大家想要备战明年蓝桥杯的,让我们一起加油。 工具安装 DevC…...
工业异常检测-CVPR2024-新的3D异常数据合成办法和自监督网络IMRNet
论文:https://arxiv.org/pdf/2311.14897v3.pdf 项目:https://github.com/chopper-233/anomaly-shapenet 这篇论文主要关注的是3D异常检测和定位,这是一个在工业质量检查中至关重要的任务。作者们提出了一种新的方法来合成3D异常数据&#x…...
HeidiSQL:MySQL图形化管理工具深度解析
本文还有配套的精品资源,点击获取 简介:HeidiSQL是一款开源的MySQL图形化管理工具,适用于多种数据库系统,如MySQL、MariaDB、SQL Server、PostgreSQL和SQLite。其提供的直观操作界面和丰富的功能简化了数据库操作,包…...
【Redis】深入解析Redis缓存机制:全面掌握缓存更新、穿透、雪崩与击穿的终极指南
文章目录 一、Redis缓存机制概述1.1 Redis缓存的基本原理1.2 常见的Redis缓存应用场景 二、缓存更新机制2.1 缓存更新的策略2.2 示例代码:主动更新缓存 三、缓存穿透3.1 缓存穿透的原因3.2 缓解缓存穿透的方法3.3 示例代码:使用布隆过滤器 四、缓存雪崩4…...
Flask使用Celery与多进程管理:优雅处理长时间任务与子进程终止技巧(multiprocessing)(subprocess)
在许多任务处理系统中,我们需要使用异步任务队列来处理繁重的计算或长时间运行的任务,如模型训练。Celery是一个广泛使用的分布式任务队列,而在某些任务中,尤其是涉及到调用独立脚本的场景中,我们需要混合使用multipro…...
【PyTorch】torch.distributed.elastic.multiprocessing.errors.ChildFailedError:
报错说明 torch.distributed.elastic.multiprocessing.errors.ChildFailedError: 报错如图所示 报错分析 该报错是 torch 和 CUDA 版本不兼容导致。 (一般N卡自带的CUDA版本与最新的torch版本相差较大) 解决方案 1.查看自己的CUDA版本 # 查看自己的…...
使用android studio写一个Android的远程通信软件(APP),有通讯的发送和接收消息界面
以下是使用 Android Studio 基于 Java 语言编写一个简单的 Android APP 实现远程通信(这里以 TCP 通信为例)的代码示例,包含基本的通信界面以及发送和接收消息功能。 1. 创建项目 打开 Android Studio,新建一个 Empty Activity …...
突破空间限制!从2D到3D:北大等开源Lift3D,助力精准具身智能操作!
文章链接:https://arxiv.org/pdf/2411.18623 项目链接:https://lift3d-web.github.io/ 亮点直击 提出了Lift3D,通过系统地提升隐式和显式的3D机器人表示,提升2D基础模型,构建一个3D操作策略。 对于隐式3D机器人表示&a…...
Android KEY的哪些事儿
目录 一、APK应用签名 1、什么是APK应用签名? 1.1 目的和作用? 1.2 长什么样子? 2、APK应用签名使用流程 步骤一:如何生成APK应用签名文件? 步骤二:如何集成APK应用签名文件? 步骤三&am…...
李宏毅深度学习-Pytorch Tutorial2
什么是张量? 张量(Tensor)是深度学习和机器学习中一个非常基础且重要的概念。在数学上,张量可以被看作是向量和矩阵的泛化。简单来说,张量是一种多维数组,它可以表示标量(0维)、向量…...
【译】为 SAP 表维护视图 (SM30) 创建选择屏幕
原文标题:Create Selection Screen for SAP Table Maintenance View (SM30) 原文链接: https://www.saphub.com/abap-dictionary/sap-abap-tmg-selection-screen/ 通常,带有单个屏幕的 SAP 表维护视图 (SM30) 会显示表中的所有记录ÿ…...
element Plus中 el-table表头宽度自适应,不换行
在工作中,使用el-table表格进行开发后,遇到了小屏幕显示器上显示表头文字会出现换行展示,比较影响美观,因此需要让表头的宽度变为不换行,且由内容自动撑开。 以下是作为工作记录,用于demo演示教程 先贴个…...
C语言程序设计P5-4【应用函数进行程序设计 | 第四节】——知识要点:数组作函数参数
知识要点:数组作函数参数 视频: 目录 一、任务分析 二、必备知识与理论 三、任务实施 一、任务分析 任务要求用选择法对数组中的 10 个整数按由小到大的顺序排序,前面在讲解数组时讲冒泡法排序曾提到选择法排序的思想。 所谓选择法就是…...
时间序列模型在LSTM中的特征输入
这里写目录标题 前言LSTM的输入组成时间步例子 实际代码解读特征提取处理成dataloader格式(用于输入到模型当中)对应到lstm的模型创建代码 总结 前言 本文章将帮助理解如何将一个时间序列的各种特征(年月日的时间特征,滚动窗口滞…...
Python_Flask02
所有人都不许学Java了,都来学Python! 如果不来学的话请网爆我的老师 连接前的准备 安装pymysql 和 flask_sqlalchemy,安装第三下面两个所需要的包才能连接上数据库 pip install pymysql pip install flask_sqlalchemy pymysql是一个Pyth…...
threejs相机辅助对象cameraHelper
为指定相机创建一个辅助对象,显示这个相机的视锥。 想要在场景里面显示相机的视锥,需要创建两个相机。 举个例子,场景中有个相机A,想要显示相机A的视锥,那么需要一个相机B,把B放在A的后面,两个…...
断点续传+测试方法完整示例
因为看不懂网上的断点续传案例,而且又不能直接复制使用,干脆自己想想写了一个。 上传入参类: import com.fasterxml.jackson.annotation.JsonIgnore; import io.swagger.annotations.ApiModel; import io.swagger.annotations.ApiModelProp…...
C#设计模式--状态模式(State Pattern)
状态模式是一种行为设计模式,它允许对象在其内部状态发生变化时改变其行为。这种模式的核心思想是将状态封装在独立的对象中,而不是将状态逻辑散布在整个程序中。 用途 简化复杂的条件逻辑:通过将不同的状态封装在不同的类中,可…...
Excel技巧:如何批量调整excel表格中的图片?
插入到excel表格中的图片大小不一,如何做到每张图片都完美的与单元格大小相同?并且能够根据单元格来改变大小?今天分享,excel表格里的图片如何批量调整大小。 方法如下: 点击表格中的一个图片,然后按住Ct…...
《反腐为了人民》第三集:揭开腐败隐身衣
风险投资、股权对价、低值高投……随着反腐败斗争向纵深推进,一些打着市场行为幌子大搞权钱交易的腐败分子暴露出来,受到党纪国法的制裁。...
泰国重申保护中国人,香港保卫局赴泰营救被绑港人
文|木白一,昨天文章在评论区提到了曝光的俩女孩已经安全回国的信息,有那种惯性思维的网友质疑说,人怎么可能回来,天真之类的。这类惯性网友就是这样,平日里沉浸在自我的认识之内,一旦出了事,又都脆弱的要死,甚至连去想办法解决问题的能力都没有。很悲哀的是,这类在国…...
泰国警方:已接回失联中国演员并将作进一步调查
新华社曼谷1月7日电(记者陈倩慈 高博)泰国国家警察总署7日晚发布通报说,警察总署督察长塔查猜当日率队前往位于泰缅边境地区的达府湄索县接回中国籍男演员王星,并将展开进一步调查。塔查猜表示,此次成功解救王星是与中国政府合作的成果。接下来,泰国有关部门经调查如确认…...
国家发改委:适当提高退休人员基本养老金和城乡居民基础养老金
今天(1月3日)上午,国务院新闻办公室举行“中国经济高质量发展成效”系列新闻发布会,国家发展改革委有关负责人表示,从近期的月度数据和高频指标看,市场预期有效提振,经济运行明显回升。有关负责人表示,我国近期经济运行发展向好势头增强,工业增长加…...
破解无人化的出路
物理学家杨振宁教授在一场公开演讲中指出:“现在的无人飞机、无人汽车驾驶、无人商店、无人酒店、无人银行,这些无人化不可怕。可怕的是这些无人机器的劳动成果如何去分配,不能把财富集中到少数人手中。如果集中到少数人手中,可能是穷人更穷,富人更富。&rdqu…...
“医务人员涉嫌参与婴儿买卖”?大同通报
网传“有医务人员涉嫌参与婴儿买卖” ,山西大同成立联合调查组。记者1月2日获悉,针对网络上反映的山西大同市第一人民医院相关人员涉嫌参与婴儿买卖一事,大同市成立联合调查组,开展调查工作。对发现的违法违纪问题,将依法依纪严肃处理。...