uniapp使用高德地图设置marker标记点,后续根据接口数据改变某个marker标记点,动态更新

最近写的一个功能属实把我难倒了,刚开始我请求一次数据获取所有标记点,然后设置到地图上,然后后面根据socket传来的数据对这些标记点实时更新,改变标记点的图片或者文字,

1:第一个想法是直接全量替换,事实证明这样不行,会很卡顿,有明显闪烁感,如果标记点比较少,就十几个可以用这种

2:第二个想法是markerlist数组与socket做判断,找到数据改变的那一个,使用map.removeMarkers接口移除掉旧的那个标记点,然后使用map.addMarkers添加新的标记点,结果还是不行,如果把map.addMarkers的参数clear设置为false,就只移除而不渲染,如果设置为true地图上就只有这一个点,而其他的点全部没了,那我就在想既然无法复用,那这标记点还要id有啥用,终于灵感来了,不需要写移除方法,只需要写添加方法就行,id一样会自动把旧的替换掉,试了一下果然可以,下面是一个简化demo

1:标记点数据

export default [{"id": 1,"latitude": 40.092954,"longitude": 116.245615,"width": 32,"height": 32,"iconPath": "../../static/images/tubiao_4.png","callout": {"content": "1","color": "#fff","fontSize": 14,"borderRadius": 4,"bgColor": "#2B73FF","display": "ALWAYS","padding": 3,"anchorY": 5}},{"id": 2,"latitude": 39.787718,"longitude": 116.44463,"width": 32,"height": 32,"iconPath": "../../static/images/tubiao_4.png","callout": {"content": "2","color": "#fff","fontSize": 14,"borderRadius": 4,"bgColor": "#2B73FF","display": "ALWAYS","padding": 3,"anchorY": 5}},{"id": 3,"latitude": 40.03828,"longitude": 116.406358,"width": 32,"height": 32,"iconPath": "../../static/images/tubiao_4.png","callout": {"content": "3","color": "#fff","fontSize": 14,"borderRadius": 4,"bgColor": "#2B73FF","display": "ALWAYS","padding": 3,"anchorY": 5}},{"id": 4,"latitude": 39.930755,"longitude": 116.248167,"width": 32,"height": 32,"iconPath": "../../static/images/tubiao_4.png","callout": {"content": "4","color": "#fff","fontSize": 14,"borderRadius": 4,"bgColor": "#2B73FF","display": "ALWAYS","padding": 3,"anchorY": 5}},{"id": 5,"latitude": 39.942493,"longitude": 116.610476,"width": 32,"height": 32,"iconPath": "../../static/images/tubiao_4.png","callout": {"content": "5","color": "#fff","fontSize": 14,"borderRadius": 4,"bgColor": "#2B73FF","display": "ALWAYS","padding": 3,"anchorY": 5}}
]

2:页面

<template><view><map class="map" id="map" style="width: 750rpx; height: 1300rpx" :include-points="includesPoints"></map></view>
</template><script setup>
import { onLoad, onShow, onReady } from '@dcloudio/uni-app';
import { ref, nextTick, watch } from 'vue';
import markerList from '../../static/js/markerList';
let map = null;
onLoad(() => {map = uni.createMapContext('map');
});
onShow(() => {});
onReady(() => {addMarker();
});
let includesPoints = ref([]);
let markerListArr = ref([]);
let markeraaa = ref([]);
const addMarker = () => {markerListArr.value = markerList;map.addMarkers({markers: markerListArr.value,clear: true,success: function () {console.log('log添加成功');},fail: function () {console.log('err添加失败');}});includesPoints.value = markerListArr.value.map((item) => ({ latitude: item.latitude, longitude: item.longitude }));setTimeout(() => {setMarker();}, 3000);
};
const setMarker = (num) => {// map.removeMarkers({// 	markerIds: [2],// 	success(res) {// 		markerListArr.value.splice(1, 1);// 		console.log('移除成功-------- item.id:>> ', markerListArr.value);// 	}// });let obj = {id: 2,latitude: 39.913144,longitude: 116.35788,// latitude: 39.787718,// longitude: 116.44463,width: 32,height: 32,joinCluster: false,checked: true,online: '1',deviceNo: '13302528497',drivingStatus: '2',iconPath: '../../static/images/tubiao_6.png',callout: {content: '20',color: '#fff',fontSize: 14,borderRadius: 4,bgColor: '#2B73FF',display: 'ALWAYS',padding: 3,anchorY: 5}};markerListArr.value.push(obj);map.addMarkers({markers: [obj],clear: false,success(res) {console.log('添加成功-------- item.id:>> ', markerListArr.value);}});
};
</script><style></style>

页面效果

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

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

相关文章

嵌入式学习——数据结构——顺序表

线性表的定义 线性表是零个或多个数据元素的有限序列&#xff0c;元素之间具有顺序性&#xff0c;如果存在多个元素&#xff0c;第一个元素无前驱&#xff0c;最有一个没有后继&#xff0c;其他的元素只有一个前驱和一个后继。线性表元素的个数n&#xff08;n>0&#xff09…

QT如何在对话框中插入表格

在Qt中&#xff0c;如果你想要在对话框中插入表格&#xff0c;通常会使用QTableWidget或QTableView结合QStandardItemModel&#xff08;对于QTableView&#xff09;或直接在QTableWidget中操作。这里&#xff0c;我将介绍如何使用QTableWidget在对话框中插入表格&#xff0c;因…

【网络安全】-rce漏洞-pikachu

rce漏洞包含命令执行漏洞与代码执行漏洞 文章目录 前言 什么是rce漏洞&#xff1f; 1.rce漏洞产生原因&#xff1a; 2.rce的分类&#xff1a; 命令执行漏洞&#xff1a; 命令拼接符&#xff1a; 常用函数&#xff1a; 代码执行漏洞&#xff1a; 常用函数&#xff1a; 分类&…

信号与线性系统综合实验

文章目录 一、实验目的二、实验内容及其结果分析&#xff08;一&#xff09;基础部分&#xff08;二&#xff09;拓展部分&#xff08;三&#xff09;应用设计部分 三、心得体会 一、实验目的 1、掌握连续时间信号与系统的时域、频域综合分析方法&#xff1b;   2、掌握运用M…

windows安装docker并初始化dapr

现在安装docker假如启动报错WSL2.0 bcdedit /set hypervisorlaunchtype auto重启电脑安装dapr winget install Dapr.CLIdapr init dapr init确认init成功 docker ps确定components文件夹init成功 %UserProfile%\.dapr

SAP B1 单据页面自定义 - 用户界面编辑字段

背景 接《SAP B1 基础实操 - 用户定义字段 (UDF)》&#xff0c;在设置完自定义字段后&#xff0c;如下图&#xff0c;通过打开【用户定义字段】可打开表单右侧的自定义字段页。然而再开打一页附加页面操作繁复&#xff0c;若是客户常用的定义字段&#xff0c;也可以把这些用户…

MongoDB 的功能

MongoDB 是一个开源的、面向文档的 NoSQL 数据库管理系统&#xff0c;具有高性能、可扩展性和灵活的存储结构。与传统的关系型数据库不同&#xff0c;MongoDB 使用 JSON 类似的 BSON&#xff08;Binary JSON&#xff09;格式存储数据&#xff0c;提供了对非结构化和半结构化数据…

JMM 指令重排 volatile happens-before

在单线程程序中&#xff0c;操作系统会通过编译器优化重排序、指令级并行重排序、内存系统重排序三个步骤对源代码进行指令重排&#xff0c;提高代码执行的性能。 但是在多线程情况下&#xff0c;操作系统“盲目” 地进行指令重排可能会导致我们不想看到的问题&#xff0c;如经…

2024第三届大学生算法大赛 真题训练2 解题报告 | 珂学家 | FFT/NTT板子

前言 题解 D是FFT板子题&#xff0c;这么来看&#xff0c;其实处于ACM入门题&#xff0c;哭了T_T. D. 行走之谜 思路: FFT 如果你知道多项式乘法&#xff0c;继而知道FFT&#xff0c;那题纯粹就是板子题&#xff0c;可惜当时比赛的时候&#xff0c;无人AC。 这题来简单抽象…

架构师考试系列(1)论文专题:基于构件的软件开发方法

摘要&#xff1a; 本文以我主持开发的某公司企业信息管理系统为例&#xff0c;探讨了基于构件的软件开发问题。该系统是一个综合信息系统&#xff0c;涵盖了原料采购、生产管理、物流管控等七大功能。在开发过程中&#xff0c;我担任系统架构师&#xff0c;负责需求分析、系统建…

常用Java API

1 字符串处理 1.1 String 类 String 类是 Java 中不可变的字符序列。它提供了以下常用方法&#xff1a; length()&#xff1a;返回字符串的长度。 charAt(index)&#xff1a;返回指定索引处的字符。 substring(startIndex, endIndex)&#xff1a;返回从 startIndex 到 endI…

物联网之PWM呼吸灯、脉冲、LEDC

MENU 前言原理硬件电路设计软件程序设计analogWrite()函数实现呼吸灯效果LEDC输出PWM信号 前言 学习制作呼吸灯&#xff0c;通过LED灯的亮度变化来验证PWM不同电压的输出。呼吸灯是指灯光在单片机的控制之下完成由亮到暗的逐渐变化&#xff0c;感觉好像是人在呼吸。 原理 脉冲宽…

【中秋月饼系列】2024年立体月饼新鲜出炉----python画月饼(1)附完整代码

【中秋月饼系列】2024年立体月饼新鲜出炉 ----python画月饼&#xff08;1&#xff09;附完整代码 本文目录&#xff1a; 零、时光宝盒 一、2024年中秋节立体逼真月饼&#xff08;效果展示&#xff09; 二、Python 海龟画图主要方法 &#xff08;1&#xff09;海龟画图的主…

学习大数据DAY56 业务理解和第一次接入

作业1 1 了解行业名词 ERP CRM OA MES WMS RPA SAAS 了解每个系统的功能和应用 ERP 系统&#xff0c;&#xff08;Enterprise Resource Planning&#xff0c;企业资源计划系统&#xff09;&#xff1a;ERP 系统 是一种用于管理企业各类资源的软件系统&#xff0c;包括生产管理…

攻防世界 ics-05

ics-05 隐藏的变量传参&#xff0c;php弱类型比较 只有设备维护中心可以点击进去 查看源码&#xff0c;发现有个隐藏的超链接变量传参 看到变量传参&#xff0c;有可能存在文件包含漏洞读取源码&#xff0c;这个站是php的站&#xff0c;所以可以使用php伪协议读取源码 index.p…

软件测试工程师面试整理-测试类型

软件测试类型多种多样,涵盖了从功能验证到性能评估的不同方面。了解各种测试类型有助于在软件开发生命周期的不同阶段选择合适的测试方法,确保软件的质量和可靠性。以下是常见的软件测试类型: 1. 功能测试(Functional Testing) ● 目标:验证软件功能是否按照需求文档正确…

2024年9月HarmonyOS鸿蒙应用开发者高级认证全新题库(覆盖99%考题)

一个小时通过鸿蒙高级认证 1、在开发 Harmony0S 应用工程时&#xff0c; 随着业务的发展&#xff0c;现在需要创建一个模块&#xff0c; 关于在 DevEco Studio 中创建 Module &#xff0c; 下列选项哪种方式是错误的? 必对 在 hvigor 目录下&#xff0c;单击鼠标右键&#xf…

Docker Swarm管理(Docker技术集群与应用)

如上图所示&#xff0c; 三台主机&#xff1a;恢复到docker的快照&#xff1b; 然后上传到三台服务器所需的镜像&#xff1b; 同步会话。执行导入脚本将镜像导入到系统中&#xff1b; 然后取消会话的同步&#xff0c;设置各个主机的主机名&#xff1b; 然后同步会话修改hosts…

Java JUC(一) 线程概念与常用方法

Java JUC&#xff08;一&#xff09; 线程概念与常用方法 一. JUC 基本概念 Java JUC&#xff08;Java Util Concurrent&#xff09; 是Java平台提供的一个并发编程工具包&#xff08;java.util.concurrent&#xff09;&#xff0c;全称为Java Concurrency Utilities。这个工具…

深入剖析 MQTT 协议:物联网通信的核心力量

摘要&#xff1a; 本文全面深入地探讨了 MQTT&#xff08;Message Queuing Telemetry Transport&#xff09;协议。详细阐述了 MQTT 协议的起源与发展背景&#xff0c;介绍其基本概念、特点及工作原理。深入分析了 MQTT 的架构组成&#xff0c;包括客户端、代理服务器及主题的作…