uniapp地图自定义文字和图标

这是我的结构:

<map class='map' id="map" :latitude="latitude" :longitude="longitude" @markertap="handleMarkerClick"   :show-location="true" :markers="covers"  />

记住别忘了在data中定义变量:

                latitude: '', // 初始纬度  
                longitude: '', // 初始经度   
                covers: [], // 覆盖物数组  

然后请求位置:

getMyLocation() {
                uni.getLocation({
                    type: 'wgs84',
                    success: (res) => {
                        this.jinweidu = res.longitude + ',' + res.latitude
                        this.latitude = res.latitude
                        this.longitude = res.longitude
                        //这是我的请求可以换成你们请求的接口
                        this.$u.get("/app/store/listNearBy?center=" + this.jinweidu + '&radius=' + 1000).then(
                         res => {
                              if (res.code == 200) {
                                  this.listmap = res.data
                                  res.data.forEach(item => { //这是将请求的数据循环并且每个更换图标和文字
                                        const shopCover = { 
                                            id: parseFloat(item.storeId),
                                            latitude: item.lat,
                                            longitude: item.lng,
                                            width: 25,
                                            height: 30,
                                            iconPath: 'https://api.ccttiot.com/smartmeter/img/static/uZXgsJE6hXbRSwbKILB4',
                                            label: {
                                                content: item.name,
                                                fontWeight: 700,
                                                color: '#8883F0',
                                                textShadow: '2px 2px 0px white, -2px -2px 0px white, 2px -2px 0px white, -2px 2px 0px white',
                                                style: {

                                                },
                                            }
                                        };
                                        this.covers.push(shopCover) //最后将更改好的数据放到地图数组中
                                    });
                                }
                            });
                    },
                    fail: (err) => {
                        console.error('获取位置失败:', err);
                    }
                });
            },

最后显示效果:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/26862.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue页面生成PDF后调起浏览器打印

一、安装依赖 首先&#xff0c;需要安装 html2canvas 和 jsPDF 库。 npm install html2canvas jspdf二、创建公共方法引入 在utils文件夹下创建两个文件分别为pdfExport.js和printPDF.js&#xff0c;代码如下&#xff1a; pdfExport.js import html2canvas from html2canv…

Python PDF转化wolrd代码怎么写

将PDF文件转换为Word文档的过程通常需要使用一些外部库来实现&#xff0c;因为Python本身并不直接支持这种转换。一个常用的库是pdf2docx&#xff0c;它可以帮助我们将PDF文件转换为Word文档格式。以下是使用pdf2docx库将PDF转换为Word的基本步骤&#xff1a; 首先&#xff0c;…

云顶之弈-测试报告

一. 项目背景 个人博客系统采用前后端分离的方法来实现&#xff0c;同时使用了数据库来存储相关的数据&#xff0c;同时将其部署到云服务器上。前端主要有四个页面构成&#xff1a;登录页、列表页、详情页以及编辑页&#xff0c;以上模拟实现了最简单的个人博客系统。其结合后…

Sqoop学习详细介绍!!

一、Sqoop介绍 Sqoop是一款开源的工具&#xff0c;主要用于在Hadoop(HDFS/Hive/HBase)与传统的数据库(mysql、postgresql...)间进行数据的传递&#xff0c;可以将一个关系型数据库&#xff08;例如 &#xff1a; MySQL ,Oracle ,Postgres等&#xff09;中的数据导进到Hadoop的H…

虚拟声卡实现音频回环

虚拟声卡实现音频回环 一、电脑扬声器播放声音路由到麦克风1. Voicemeeters安装设置2. 音频设备选择 二、回声模拟 一、电脑扬声器播放声音路由到麦克风 1. Voicemeeters安装设置 2. 音频设备选择 以腾讯会议为例 二、回声模拟 选中物理输入设备“Stereo Input 1”和物理输出设…

GlusterFS企业分布式存储

GlusterFS 分布式文件系统代表-nfs常见分布式存储Gluster存储基础梳理GlusterFS 适合大文件还是小文件存储&#xff1f; 应用场景术语Trusted Storage PoolBrickVolumes Glusterfs整体工作流程-数据访问流程GlusterFS客户端访问流程 GlusterFS常用命令部署 GlusterFS 群集准备环…

修改版的VectorDBBench更好用

原版本VectorDBBench的几个问题 在这里就不介绍VectorDBBench是干什么的了&#xff0c;上官网即可。 1.并发数设置的太少 2.测试时长30秒太长 3.连接milvus无用户和密码框&#xff0c;这个是最大的问题 4.修改了一下其它参数 由于很多网友发私信问一些milvus的相关技术问…

【机器学习】支持向量机(个人笔记)

文章目录 SVM 分类器的误差函数分类误差函数距离误差函数C 参数 非线性边界的 SVM 分类器&#xff08;内核方法&#xff09;多项式内核径向基函数&#xff08;RBF&#xff09;内核 源代码文件请点击此处&#xff01; SVM 分类器的误差函数 SVM 使用两条平行线&#xff0c;使用…

基于flask的网站如何使用https加密通信

文章目录 内容简介网站目录示例生成SSL证书单独使用Flask使用WSGI服务器Nginx反向代理参考资料 内容简介 HTTPS 是一种至关重要的网络安全协议&#xff0c;它通过在 HTTP 协议之上添加 SSL/TLS 层来确保数据传输的安全性和完整性。这有助于防止数据在客户端和服务器之间传输时…

高考志愿专业选择:计算机人才需求激增,人工智能领域成热门

随着2024年高考的落幕&#xff0c;数百万高三学生站在了人生新的十字路口&#xff0c;面临着一个重要的抉择&#xff1a;选择大学专业。这一选择不仅关乎未来四年的学习生涯&#xff0c;更可能决定一个人一生的职业方向和人生轨迹。在众多专业中&#xff0c;计算机相关专业因其…

如何用Xinstall CPS结算系统打破传统营销桎梏,实现用户增长?

在互联网流量红利逐渐衰退的今天&#xff0c;App推广和运营面临着前所未有的挑战。如何快速搭建起满足用户需求的运营体系&#xff0c;成为了众多企业急待解决的问题。而在这个关键时刻&#xff0c;Xinstall CPS结算系统应运而生&#xff0c;以其独特的优势帮助企业解决了一系列…

【DPDK学习路径】九、学习分支

第八节给出了如何以轮询的方式从网卡中收取数据报文&#xff0c;目前为止已经学会了一些DPDK的简单用法&#xff0c;接下来的学习路径将有多条&#xff1a;1、开发功能&#xff1b;2、软件架构&#xff1b;3、性能调优。 上述排序依据的是难易程序&#xff0c;对于哪些对网络协…

深度学习500问——Chapter11:迁移学习(2)

文章目录 11.2 迁移学习的基本思路有哪些 11.2.1 基于样本迁移 11.2.2 基于特征迁移 11.2.3 基于模型迁移 11.2.4 基于关系迁移 11.2 迁移学习的基本思路有哪些 迁移学习的基本方法可以分为四种。这四种基本方法分别是&#xff1a;基于样本的迁移&#xff0c;基于模型的迁移&a…

编程入门高中:探索数字世界的无限可能

编程入门高中&#xff1a;探索数字世界的无限可能 在信息化社会的浪潮中&#xff0c;编程技能逐渐成为了新时代人才的必备素养。对于高中生而言&#xff0c;掌握编程技能不仅可以提升个人竞争力&#xff0c;还能为未来的职业发展奠定坚实基础。本文将围绕编程入门高中展开探讨…

PTA 7-2 信息排序整理

某生物实验室记录了n种(n<1000)病毒信息&#xff0c;每种病毒都有编号、传染性和致病性三个基本信息&#xff0c;编号是1000-9999的人工编号&#xff0c;其中的传染性和致病性是用0-100的数值代表其严重程度。请你帮实验室完成这些病毒信息的处理&#xff0c;即按传染性升序…

PTA:7-188 水仙花数

作者 王秀秀 单位 山东交通学院 任务描述 本关任务&#xff1a;输出100到999之间的所有的“水仙花数”。所谓的“水仙花数”是指一个3位数&#xff0c;其各位数字立方和等于该数本身。 例如&#xff0c;153是一个水仙花数&#xff0c;因为 15313 53 33 提示 关键在于对一…

zlib demo

zlib简介 zlib是一个开源的数据压缩库&#xff0c;用于在应用程序中进行数据的压缩和解压缩操作。它提供了一组函数和数据结构&#xff0c;可以实现广泛的压缩算法&#xff0c;其中最常用的是Deflate算法。zlib库的设计简单、高效&#xff0c;并且具有广泛的应用领域。 压缩&…

Sa-Token鉴权与网关服务实现

纠错&#xff1a; 在上一部分里我完成了微服务框架的初步实现&#xff0c;但是先说一下之前有一个错误&#xff0c;就是依赖部分 上次的学习中我在总的父模块下引入了spring-boot-dependencies&#xff08;版本控制&#xff09;我以为在子模块下就不需要再引用了&#xff0c;…

Opencv图像梯度计算

Opencv图像梯度计算 Sobel算子 可以理解为是做边缘检测的一种方法。 首先说明自己对图像梯度的简单理解&#xff1a;简单理解就是图像的颜色发生变化的边界区域在X方向和Y方向上的梯度值 Gx Gy 而Gx和Gy处的梯度的计算—使用下面的公式来进行计算。 G x [ − 1 0 1 − 2 0 …

【计算机网络】 传输层

一、传输层提供的服务 1.1 传输层的功能 1.1.1 传输层的功能如下&#xff1a; 传输层提供应用进程之间的逻辑通信&#xff08;即端到端的通信&#xff09;。与网络层的区别是&#xff1a;网络层提供的是主机之间的逻辑通信。 1.1.2 复用和分用 传输层要还要对收到的报文进行…