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

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);
                    }
                });
            },

最后显示效果:

相关文章:

uniapp地图自定义文字和图标

这是我的结构&#xff1a; <map classmap id"map" :latitude"latitude" :longitude"longitude" markertap"handleMarkerClick" :show-location"true" :markers"covers" /> 记住别忘了在data中定义变量…...

k8s_探针专题

关于探针 生产环境中一定要给pod设置探针&#xff0c;不然pod内的应用发生异常时&#xff0c;K8s将不会重启pod。 需要遵循以下几个原则&#xff08;本人自己总结&#xff0c;仅供参考&#xff09;&#xff1a; 探针尽量简单&#xff0c;不要消耗过多资源。因为探针较为频繁的…...

MySQL触发器基本结构

1、修改分隔符符号 delimiter $$ 可以修改成$$ //都行 2、创建触发器函数名称 create trigger 函数名 3、什么样的操作出发&#xff0c;操作那个表 after&#xff1a;......之后触发 befor&#xff1a;......之前触发 insert&#xff1a;插入被触发 update&#xff1a;修改被触…...

前缀和(一维前缀和+二维前缀和)

前缀和 定义&#xff1a; 前缀和是指某序列的前n项和&#xff0c;可以把它理解为数学上的数列的前n项和&#xff0c;而差分可以看成前缀和的逆运算。合理的使用前缀和与差分&#xff0c;可以将某些复杂的问题简单化。 用途&#xff1a; 前缀和一般用于统计一个区间的和&…...

web前端五行属性:深入探索与实战解析

web前端五行属性&#xff1a;深入探索与实战解析 在Web前端开发中&#xff0c;五行属性这一概念或许听起来有些陌生。然而&#xff0c;如果我们将其与前端开发的核心理念相结合&#xff0c;就能发现其中蕴含的深刻内涵。本文将从四个方面、五个方面、六个方面和七个方面&#…...

白酒:茅台镇白酒的酒厂社会责任与可持续发展

云仓酒庄豪迈白酒&#xff0c;作为茅台镇的品牌&#xff0c;不仅在产品品质和口感方面有着卓着的表现&#xff0c;在酒厂社会责任和可持续发展方面也做出了积极的探索和实践。 首先&#xff0c;云仓酒庄豪迈白酒注重环境保护和资源利用。酒厂在生产过程中严格控制能源消耗和排放…...

音视频开发_SDL音频播放器的实现

今天向大家介绍一下如何通过 SDL 实现一个PCM音频播放器。这是一个最简单的播放器&#xff0c;它不涉及到音频的解复用&#xff0c;解码等工作。我们只需要将音频原始数据喂给 SDL 音频接口就可以听到悦耳的声音了。在下面的列子中我将向你演示&#xff0c;使用 SDL 做这样一个…...

C语言学习系列:初识C语言

前言&#xff0c;C语言是什么 语言&#xff0c;比如中文、英语、法语、德语等&#xff0c;是人与人交流的工具。 C语言也是语言&#xff0c;不过是一种特殊的语言&#xff0c;是人与计算机交流的工具。 为什么叫C语言呢&#xff1f; 这就要从C语言的历史说起了。 一&#…...

利用反向代理编写HTTP抓包工具——可视化界面

手写HTTP抓包工具——可视化界面 项目描述语言golang可视化fynev2功能代理抓包、重发、记录 目录 1. 示例1.1 主界面1.2 开启反向代理1.3 抓包1.4 历史记录1.5 重发 2. 核心代码2.1 GUI2.1 抓包 3. 结语3.1 传送门 1. 示例 1.1 主界面 1.2 开启反向代理 1.3 抓包 1.4 历史记录…...

下拉框数据被遮挡 且 后续数据无法下拉的 解决方法

目录 前言1. 问题所示2. 原理分析3. 解决方法3.1 添加空白版2.2 调整z-index2.3 父容器的溢出属性2.4 调整样式属性4. 效果图前言 小程序使用的是Uniapp,原理都差不多,索性标题就不标注Uniapp(小程序) 对于该问题调试了一个晚上,最终解决,对此记录下来 1. 问题所示 执…...

课设--学生成绩管理系统(二)

欢迎来到 Papicatch的博客 目录 &#x1f40b;引言 &#x1f988;编写目的 &#x1f988;项目说明 &#x1f40b;产品介绍 &#x1f988;产品概要说明 &#x1f988;产品用户定位 &#x1f988;产品中的角色 &#x1f40b; 产品总体业务流程图 &#x1f40b; 产品功…...

STM32CubeMX配置-外部中断配置

一、简介 MCU为STM32G070&#xff0c;配置为上升沿触发外部中断&#xff0c;在上升沿外部中断回调函数中进行相关操作。 二、外部中断配置 查看规格书中管教描述&#xff0c;找到I/O对应的外部中断线&#xff0c;然后进行如下上升沿触发外部中断配置。 三、生成代码 调用上升沿…...

基于Vue的日程排班表 - common-schedule

原文&#xff1a;基于Vue的日程排班表 - common-schedule-CSDN博客...

SmartEDA、Multisim、Proteus大比拼:电路设计王者之争?

在电路设计领域&#xff0c;SmartEDA、Multisim和Proteus无疑是三款备受瞩目的软件工具。它们各自拥有独特的功能和优势&#xff0c;但在这场电路设计王者的竞争中&#xff0c;谁才是真正的领跑者&#xff1f;让我们深入探究这三款软件的异同&#xff0c;揭示它们各自的魅力所在…...

【教资科一传统文化】文化素养传统文化之神话传说、天文历法、古代称谓、中国传统节日、成语典故

目录 ​编辑 传统文化之天文历法 (一)四时(四季)从农历、名称上掌握 (二)二十四节气&#xff08;1、名称2、季节-节气3、特殊&#xff09; (三)十二时辰&#xff08;1.先后顺序2.时间段3.别称&#xff09; (四)五更(五夜) (五)天干地支(1.名称2.纪年) ​文化素养传统文化…...

Apache Pulsar 从入门到精通

一、快速入门 Pulsar 是一个分布式发布-订阅消息平台&#xff0c;具有非常灵活的消息模型和直观的客户端 API。 最初由 Yahoo 开发&#xff0c;在 2016 年开源&#xff0c;并于2018年9月毕业成为 Apache 基金会的顶级项目。Pulsar 已经在 Yahoo 的生产环境使用了三年多&#…...

[Bug]使用duckduckgo的duckduckgo_search API搜索图片出现了错误

现在在kaggle上学习一个课程&#xff0c;第一课主要是识别图片里面是不是鸟&#x1f426;。其中一步是使用duckduckgo 搜索图片&#xff0c;源码&#xff1a; from duckduckgo_search import ddg_images from fastcore.all import * from fastbook import search_images_ddgde…...

线程池若干问题

线程池中线程异常后&#xff0c;销毁还是复用&#xff1f; 线程池在提交任务前&#xff0c;可以提前创建线程吗&#xff1f; 线程池中线程异常后&#xff0c;销毁还是复用&#xff1f; 直接说结论&#xff0c;需要分两种情况&#xff1a; 使用execute()提交任务&#xff1a…...

k8s+RabbitMQ单机部署

1 k8s 配置文件yaml: apiVersion: apps/v1 kind: Deployment metadata:name: rabbitmq-deploynamespace: rz-dt spec:replicas: 1selector:matchLabels:app: rabbitmqtemplate:metadata:labels:app: rabbitmqspec:containers:- name: rabbitmqimage: "rz-dt-image-server…...

github.com/therecipe/qt windows中安装

github.com/therecipe/qt windows中安装 a.准备好源码,解压到go/src/github.com/therecipe/qtwin下 b.设置cmd环境变量: set QT_DIRM:\work\tool\Qt5.14.2\5.14.2\mingw73_64 set QT_VERSION5.14.2 set QT_API5.13.0 set QT_QMAKE_DIRM:\work\tool\Qt5.14.2\5.14.2\mingw73_64\…...

YimMenu终极指南:免费GTA5辅助工具完整使用教程

YimMenu终极指南&#xff1a;免费GTA5辅助工具完整使用教程 【免费下载链接】YimMenu YimMenu, a GTA V menu protecting against a wide ranges of the public crashes and improving the overall experience. 项目地址: https://gitcode.com/GitHub_Trending/yi/YimMenu …...

鸿蒙ArkTS项目避坑指南:从零搭建外卖应用时,我踩过的那些‘坑’

鸿蒙ArkTS实战避坑手册&#xff1a;外卖应用开发中的12个致命陷阱 第一次在DevEco Studio里看到ArkTS的语法高亮时&#xff0c;我以为这不过是又一个前端框架的变种——直到我的外卖应用项目在模拟器上连续崩溃了七次。作为从Android原生开发转向鸿蒙的"老手"&#x…...

S32K144 LPUART中断接收丢字节?手把手教你用模拟空闲中断搞定Modbus RTU

S32K144 LPUART通信优化&#xff1a;模拟空闲中断实现Modbus RTU稳定传输 工业控制系统中&#xff0c;RS485总线上的Modbus RTU通信对时序和稳定性有着严苛要求。当使用NXP S32K144这类汽车级MCU时&#xff0c;开发者常会遇到一个典型问题&#xff1a;LPUART模块在连续接收多字…...

Restate监控与调试:如何利用内置工具实现应用全链路可观测性

Restate监控与调试&#xff1a;如何利用内置工具实现应用全链路可观测性 【免费下载链接】restate Restate is the platform for building resilient applications that tolerate all infrastructure faults w/o the need for a PhD. 项目地址: https://gitcode.com/gh_mirro…...

[PTA]从汉诺塔到斐波那契:递归思想在经典算法问题中的实战解析

1. 递归思想&#xff1a;从神话到代码的魔法之旅 第一次接触递归时&#xff0c;我盯着汉诺塔的代码看了整整三小时。那种感觉就像小时候听魔术师说"见证奇迹的时刻"——明明看着他把鸽子变没了&#xff0c;却死活想不通机关在哪。递归就是编程世界最优雅的魔术&#…...

别再死记硬背了!用5分钟搞懂NPN和PNP三极管的电流流向(附快速判断技巧)

5分钟掌握NPN与PNP三极管的电流奥秘&#xff1a;从生活场景到实战技巧 记得第一次拆解收音机时&#xff0c;那些黑色的小方块上延伸出的金属腿让我一头雾水——它们看起来平平无奇&#xff0c;却能控制电流的放大与开关。直到导师用浇花的水管作比喻&#xff0c;三极管的秘密才…...

3个关键步骤解决INAV VTOL模式切换抖动问题

3个关键步骤解决INAV VTOL模式切换抖动问题 【免费下载链接】inav INAV: Navigation-enabled flight control software 项目地址: https://gitcode.com/gh_mirrors/in/inav 垂直起降&#xff08;VTOL&#xff09;无人机融合了固定翼的续航优势与多旋翼的起降灵活性&…...

告别演唱会抢票焦虑:大麦网Python自动化抢票脚本终极指南

告别演唱会抢票焦虑&#xff1a;大麦网Python自动化抢票脚本终极指南 【免费下载链接】DamaiHelper 大麦网演唱会演出抢票脚本。 项目地址: https://gitcode.com/gh_mirrors/dama/DamaiHelper 还在为心仪歌手的演唱会门票秒光而烦恼吗&#xff1f;还在为黄牛高价票而心痛…...

延时补偿预测器

Active flux基于扰动观测器补偿仿真模型&#xff1a; &#xff08;1&#xff09;1.5周期延时补偿 &#xff08;2&#xff09;相电压补偿 &#xff08;2&#xff09;扰动观测器补偿最近在调试电机控制项目的时候&#xff0c;总遇到Active Flux观测器输出波形抖动的问题。工程师们…...

论文AI率从80%降到10%以下的完整攻略:实测3款降AI率工具真实效果

论文AI率从80%降到10%以下的完整攻略&#xff1a;实测3款降AI率工具真实效果 上个月我同学发来一张知网检测报告&#xff0c;AI率87%&#xff0c;整个人都懵了。她用DeepSeek写了大部分初稿&#xff0c;没想到检测会这么高。当时距离论文提交截止不到两周&#xff0c;她问我有没…...