uniapp实现地图点聚合

点聚合的最重要的一个地方是在 markers 中添加 joinCluster = true 这个重要的属性,否则将无法开启点聚合功能。
其实在uniapp的官方文档里体现的不是那么清楚,但是在小程序文档提示的就相当清楚。
实现效果如下:
重点:需要编译在小程序开发工具中使用 “ 真机预览 ” 才可展示如图所示效果
在这里插入图片描述
1、使用地图组件

<template>
	<map id="alarm_map" :markers="allMarkers" :show-location="true" :latitude="latitude" scale="18"></map>
</template>

2、页面中逻辑

import { getApi } from "@/utils/common.js"
export default {
	data() {
		return {
			latitude: 29.519418, // 纬度
			longitude: 106.687094, // 经度
			allMarkers: [] // 标记点
		}
	},
	onReady() {
		// 1.页面准备好后,获取到map组件的执行上下文。注意:这里是取的map的id属性
		this.mapContext = uni.createMapContext("alarm_map", this);
		// 2.请求数据
		this.getallStations()
	},
	methods: {
		getallStations() {
			uni.showLoading()
			let obj = {
				id: id,
				stationQuery: query
			}
			getApi(obj).then(res => {
				uni.hideLoading();
				if (res.code == 0) {
					if (!Array.isArray(res.data) || res.data.length <= 0) return
					// 拿到请求数据后,把数据传给点聚合功能;
					this.setMarkersAndCluster(res.data) // 3、调用聚合功能 
				}
			})
		},
		// 聚合功能
		setMarkersAndCluster(markerList) {
			// 1.组装数据之后,并赋值给地图上的marker
			this.allMarkers = Array.from(markerList).map((item, i) => {
				return {
				...item,
				width: 41,
				height: 41,
				iconPath: 'https://cdn.uviewui.com/uview/album/1.jpg',
				joinCluster: true, // 这个属性很重要,必须要
				callout: { // 自定义标记点上方的气泡窗口
					content: '***聚合1',
					display: 'ALWAYS', // 'BYCLICK':点击显示; 'ALWAYS':常显
					padding: 5,
					textAlign: 'center',
					color: '#C2874D',
					borderRadius: 4
				},
				label: { // 为标记点旁边增加标签
					content: '你好,marker',
					borderColor: '#ff0000',
					bgColor: '#ffffff'## 标题
				},
			}
		});
    
		// 2.初始化点聚合的配置,未调用时采用默认配置
		this.mapContext.initMarkerCluster({
			enableDefaultStyle: false, // 是否启用默认的聚合样式(是否用自定义图标)
			zoomOnClick: true,
			gridSize: 60,
			complete(res) {
				console.log('initMarkerCluster', res)
			}
		});
    
		// 3.发生聚合时,给聚合点设置marker标签
		this.mapContext.on('markerClusterCreate', res => {
			const clusters = res.clusters // 新产生的聚合簇
			const zhou = clusters.map(item=> {
				const {
				center, // 聚合点的经纬度数组
				clusterId, // 聚合簇id
				markerIds // 已经聚合了的标记点id数组
				} = item
				
				return {
					...center,
					width: 50,
					height: 50,
					clusterId, // 必须有
					iconPath: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/marker_blue.png',
					borderRadius: 8,
					joinCluster: true,
					label: { // 定制聚合点样式
						content: markerIds.length + '',
						fontSize: 14,
						width: 18,
						height: 18,
						color: '#ffffff',
						bgColor: '#C2874D',
						borderRadius: 6,
						textAlign: 'center',
						anchorX: 25,
						anchorY: -60,
					}
				}
		})
		
      	// 4. 添加聚合簇标签
		this.mapContext.addMarkers({
			markers: zhou,
			clear: false, //是否先清空地图上所有的marker
		})
    })
  }
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

git下载太慢

git官网下载git太慢 阿里git地址 下载适合自己的版本

HTTP请求走私漏洞简单分析

文章目录 HTTP请求走私漏洞的产生HTTP请求走私漏洞的分类HTTP请求走私攻击的危害确认HTTP请求走私漏洞通过时间延迟技术确认CL漏洞通过时间延迟技术寻找TE.CL漏洞 使用差异响应内容确认漏洞通过差异响应确认CL.TE漏洞通过差异响应确认TE.CL漏洞 请求走私漏洞的利用通过请求漏洞…

ARTS 挑战打卡的第1天 --- Linux驱动与设备的匹配规则(Tips)

前言 &#xff08;1&#xff09;因为在Linux驱动开发中&#xff0c;驱动可以和设备c文件文件进行匹配&#xff0c;也可以和设备树dts文件进行匹配。为了弄明白驱动与他们的匹配规则&#xff0c;我查阅了一些资料同时阅读了源码&#xff0c;最终打算使用图片的方式形象具体的写成…

FFmpeg5.0源码阅读——av_interleaved_write_frame

摘要&#xff1a;本文主要详细描述FFmpeg中封装时写packet到媒体文件的函数av_interleaved_write_frame的实现。   关键字&#xff1a;av_interleaved_write_frame   读者须知&#xff1a;读者需要熟悉ffmpeg的基本使用。 1 基本调用流程 av_interleaved_write_frame的基本…

matlab使用教程(6)—线性方程组的求解

进行科学计算时&#xff0c;最重要的一个问题是对联立线性方程组求解。在矩阵表示法中&#xff0c;常见问题采用以下形式&#xff1a;给定两个矩阵 A 和 b&#xff0c;是否存在一个唯一矩阵 x 使 Ax b 或 xA b&#xff1f; 考虑一维示例具有指导意义。例如&#xff0c;方程 …

Redis - 缓存的双写一致性

概念&#xff1a; 当修改了数据库的数据也要同时更新缓存的数据&#xff0c;缓存和数据库的数据要保持一致 那为什么会有不一致的情况呢&#xff1f; 如果不追求一致性&#xff0c;正常有两种做法 先修改数据库 后删除旧的缓存先删除旧的缓存 再修改数据库 我们以先删除旧的…

【玩转pandas系列】数据清洗(文末送书福利)

文章目录 一、重复值检测二、元素替换1️⃣ 元素替换replace2️⃣ 数据映射map 三、修改索引1️⃣ 修改索引名rename2️⃣ 设置索引和重置索引 四、数据处理1️⃣ apply与applymap2️⃣ transform 五、异常值处理六、抽样聚合函数1️⃣ 抽样2️⃣ 数学函数 七、分组聚合&#x…

数字世界未来十年面貌如何?

随着科技的不断发展和创新&#xff0c;数字世界将在未来十年迎来一系列革命性的变化和进步。以下是数字世界未来十年面貌的一些预测&#xff1a; 人工智能全面普及&#xff1a;人工智能将逐渐渗透到我们生活的方方面面。从智能家居到智能交通&#xff0c;从个性化医疗到智能零售…

用python编写一个小程序,如何用python编写软件

大家好&#xff0c;给大家分享一下用python编写一个小程序&#xff0c;很多人还不知道这一点。下面详细解释一下。现在让我们来看看&#xff01; 1、python可以写手机应用程序吗&#xff1f; 我想有人曲解意思了&#xff0c;人家说用python开发渣蔽一个手机app&#xff0c;不是…

零基础C#编写上位机如何入门?

学习C#基础语法和.NET框架&#xff0c;掌握基本编程概念和语法&#xff0c;例如数据类型、类、对象、继承、多态、异常处理等。学习WinForm窗体应用程序开发技术&#xff0c;掌握窗体应用程序的设计和开发&#xff0c;例如控件的使用、事件驱动编程、窗体的布局与设计等。学习数…

《向量数据库指南》——Milvus Cloud 2.3 和 2.4 版本的重要变化

Milvus Cloud2.3 和 2.4 版本的重要变化。 首先是 Milvus Cloud2.3 将支持 Json 数据类型,在此基础上亦会支持 Schemaless。此前,用户在使用 Milvus Cloud的过程中会先定一个静态 Schema,此时,如果在实际业务层面如果多了几个 feature 或者 Metadata,就意味着数据需要重新…

什么是架构 架构图

如何成为一名架构师,架构师成长之路_golang架构师成长之路_个人渣记录仅为自己搜索用的博客-CSDN博客 如何画架构图_个人渣记录仅为自己搜索用的博客-CSDN博客 如何画好一张架构图&#xff1f;&#xff08;内含知识图谱&#xff09; - 知乎 什么是架构&#xff1f;要表达的到…

代码随想录算法训练营第二十八天 | Leetcode随机抽题检测

Leetcode随机抽题检测--使用题库&#xff1a;Leetcode热题100 1 两数之和未看解答自己编写的青春版重点题解的代码日后再次复习重新写 49 字母异位词分组未看解答自己编写的青春版重点题解的代码日后再次复习重新写 128 最长连续序列未看解答自己编写的青春版重点关于 left 和 …

黑客技术(网络安全)学习笔记

一、网络安全基础知识 1.计算机基础知识 了解了计算机的硬件、软件、操作系统和网络结构等基础知识&#xff0c;可以帮助您更好地理解网络安全的概念和技术。 2.网络基础知识 了解了网络的结构、协议、服务和安全问题&#xff0c;可以帮助您更好地解决网络安全的原理和技术…

Qt 2. QSerialPortInfo显示串口信息

在ex2.pro 添加&#xff1a; QT serialport//main.cpp #include "ex2.h" #include <QtSerialPort/QtSerialPort> #include <QApplication>int main(int argc, char *argv[]) {QApplication a(argc, argv);Ex2 w;w.show();QList<QSerialPortInfo>…

出海拍|疯了!ChatGPT 大规模封号,有钱还不赚?

时代洪流裹挟命运流转&#xff0c;世事变迁暗藏跨境沉浮。 几个月前&#xff0c;OpenAI的创始人之一马斯克曾在社交媒体平台上称赞ChatGPT &#xff1a;“Its a new world. Goodbye homework!”而他所说的ChatGPT 引领着许多AI工具&#xff0c;随后便开始如雨后春笋般出现在我…

刷题学算法

刷题学算法 数据结构 一、数组 1. 数组创建&#xff1a; // 方式1&#xff1a;先创建&#xff0c;再逐个存储元素 String[] cityArray1 new String[5]; cityArray1[0] "北京"; cityArray1[1] "上海"; cityArray1[2] "广州"; cityArray1[3…

【RabbitMQ(day4)】SpringBoot整合RabbitMQ与MQ应用场景说明

一、SpringBoot 中使用 RabbitMQ 导入对应的依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-amqp</artifactId></dependency>配置配置文件 spring:application:name: rabbitmq-springbo…

linux备份与还原系统(类似window上ghost备份还原)

一、摘要 在linux上进行了几年的开发工作 &#xff08;qt ros&#xff09; 突然发现&#xff0c;现在有公司硬件、笔记本台式机一台占一个系统&#xff0c;导致硬件太浪费&#xff0c;又不能用虚拟机&#xff08;有时候要链接硬件必须物理机&#xff09;怎么办&#xff1f; 二…

【C++】开源:Boost库常用组件配置使用

&#x1f60f;★,:.☆(&#xffe3;▽&#xffe3;)/$:.★ &#x1f60f; 这篇文章主要介绍Boost库常用组件配置使用。 无专精则不能成&#xff0c;无涉猎则不能通。——梁启超 欢迎来到我的博客&#xff0c;一起学习&#xff0c;共同进步。 喜欢的朋友可以关注一下&#xff0c…