uniapp实现地图点聚合

news2024/12/26 15:05:34

点聚合的最重要的一个地方是在 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.coloradmin.cn/o/820292.html

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

相关文章

PySpark介绍与安装

Spark是什么 定义&#xff1a;Apache Spark是用于大规模数据&#xff08;large-scala data&#xff09;处理的统一&#xff08;unified&#xff09;分析引擎。 简单来说&#xff0c;Spark是一款分布式的计算框架&#xff0c;用于调度成百上千的服务器集群&#xff0c;计算TB、…

免费商城搭建之java版直播商城平台规划及常见的营销模式+电商源码+小程序+三级分销+二次开发

&#xfeff; 1. 涉及平台 平台管理、商家端&#xff08;PC端、手机端&#xff09;、买家平台&#xff08;H5/公众号、小程序、APP端&#xff08;IOS/Android&#xff09;、微服务平台&#xff08;业务服务&#xff09; 2. 核心架构 Spring Cloud、Spring Boot、Mybatis、R…

Linux 入侵痕迹清理技巧(仅限学习安全知识)

vim ~/.bash_history 查看历史操作命令&#xff1a;history history记录文件&#xff1a;more ~/.bash_history history -c #使用vim打开一个文件 vi test.txt # 设置vim不记录命令&#xff0c;Vim会将命令历史记录&#xff0c;保存在viminfo文件中。 :set history0 # 用vim的…

Qt之qml和widget混合编程调用

首先是创建一个widget项目 然后需要添加qml和quick的插件使用 QT quickwidgets qml 接着要在界面上创建一个quickwidget和按钮 创建一个c对象类 QObjectQml #ifndef QOBJECTQML_H #define QOBJECTQML_H#include <QObject> #include <QDebug> class QObjectQml …

如何去推动自己团队所提出的需求

自己团队所提出的需求是指性能优化、技术栈升级、架构调整等需求&#xff0c;偏向于技术范畴。 要推动这类需求&#xff0c;除了自己团队的努力之外&#xff0c;还需要一些外在的辅助因素。 一、时机 对于我们自己团队内部就能消化的需求&#xff0c;主要的问题就是人员&#x…

upload-labs详解------持续更新

目录 注&#xff1a; 搭建&#xff1a; pass-01&#xff08;前端绕过&#xff09; pass-02&#xff08;后缀绕过&#xff09; pass-03&#xff08;黑名单绕过&#xff09; pass-04&#xff08;Apache解析漏洞\.htaccess文件绕过&#xff09; 注&#xff1a; 本项目提供的…

稍微深度踩坑haystack + whoosh + jieba

说到django的全文检索&#xff0c;网上基本推荐的都是 haystack whoosh jieba 的方案。 由于我的需求对搜索时间敏感度较低&#xff0c;但是要求不能有数据的错漏。 但是没有调试的情况下&#xff0c;搜索质量真的很差&#xff0c;搞得我都想直接用Like搜索数据库算了。 但是…

item_search-ks-根据关键词取商品列表

一、接口参数说明&#xff1a; item_search-根据关键词取商品列表&#xff0c;点击更多API调试&#xff0c;请移步注册API账号点击获取测试key和secret 公共参数 请求地址: https://api-gw.onebound.cn/ks/item_search 名称类型必须描述keyString是调用key&#xff08;http:…

一文快速入门Byzer-python

目录 一、Byzer-Python介绍 二、Byzer-python工具语法糖 三、环境依赖 1. Python 环境搭建 2. Ray 环境搭建 3. Byzer-python 与 Ray 四、参数详解 五、数据处理 1. Byzer-python 处理数据 2. Byzer-python 代码说明 3. Byzer-python 读写 Excel 文件 4. Byzer-pytho…

FPGA及其应用

目录 1.什么是FPGA 2.FPGA的硬件结构 3.FPGA与单片机的区别 4.FPGA的具体应用场景 1.什么是FPGA FPGA&#xff08;Field-Programmable Gate Array&#xff09;是一种可编程逻辑器件&#xff0c;它由大量的可编程逻辑单元&#xff08;CLB&#xff09;和可编程连线&#xff08…

解决el-table打印时数据重复显示

1.表格数据比较多加了横向滚动和竖向滚动&#xff0c;导致打印出问题 主要原因是fixed导致&#xff0c;但是又必须得滚动和打印 方法如下&#xff1a; 1. 2. is_fixed: true,//data中定义初始值 3.打印时设置为false,记得要改回true if (key 2) { this.is_fixed false //打…

Image process ----butterworth high pass 滤波器

import numpy as np import matplotlib.pyplot as plt import cv2def Butterworth_Filter_Image():img cv2.imread(r/Users/PycharmProjects/ImageProcess/Butterworth Filter Image/Pasted Graphic 31.png,0)plt.imshow(img)# ———————————————————————…

Sublime操作技巧笔记

同时选中2个文件&#xff1a;自动切换成左右2个界面 格式化代码ctrlshifth&#xff1a; 使用快捷键ctrl shift p调出控制台&#xff0c;输入install package&#xff0c;然后输入html-css-js prettify&#xff0c;进行下载。具体的快捷键在preference > package setting &g…

P1542 包裹快递 (二分答案)(内附封面)

包裹快递 题目描述 小 K 成功地破解了密文。但是乘车到 X 国的时候&#xff0c;发现钱包被偷了&#xff0c;于是无奈之下只好作快递员来攒足路费去 Orz 教主…… 一个快递公司要将 n n n 个包裹分别送到 n n n 个地方&#xff0c;并分配给邮递员小 K 一个事先设定好的路线…

PoseiSwap:首个基于模块化设施构建的订单簿 DEX

在前不久&#xff0c;PoseiSwap 曾以1000万美元的估值&#xff0c;获得了来自于ZebecLabs基金会的150万美元的融资。此后 PoseiSwap 又以2500万美元的估值&#xff0c;从GateLabs、EmurgoVentures、Republic以及CipholioVentures等行业顶级投资机构中&#xff0c;获得了新一轮未…

QMessageBox类

QMessageBox类 静态方法例子 静态方法 调用这一些静态成员函数&#xff0c;就可以得到模态提示框 枚举值为&#xff1a; 例子 头文件&#xff1a; #ifndef MAINWINDOW_H #define MAINWINDOW_H#include <QMainWindow> #include <QMessageBox>QT_BEGIN_NAMESPACE…

ORB算法在opencv中实现方法

在OPenCV中实现ORB算法&#xff0c;使用的是&#xff1a; 1.实例化ORB orb cv.xfeatures2d.orb_create(nfeatures)参数&#xff1a; nfeatures: 特征点的最大数量 2.利用orb.detectAndCompute()检测关键点并计算 kp,des orb.detectAndCompute(gray,None)参数&#xff1a…

跟踪项目进度,项目经理可以通过这三个方面进行

项目实施过程中&#xff0c;常常会出现一些不确定性因素&#xff0c;如未确定项目的轻重缓急、优先级变化、任务不明确、团队成员对具体内容和实施流程不清楚等。 此外&#xff0c;对项目资源的使用情况不明确也是导致项目延期的因素之一。因此&#xff0c;在项目实施前&…

Linux之 centos、Ubuntu 安装常见程序 (-) Mysql 5.7 版本和8.0版本

CentOS 安装 MySql 注意 需要有root权限 安装5.7版本 – 由于MySql并不在CentOS的官方仓库中&#xff0c;所以需要通过rmp命令&#xff1a; 导入MySQL仓库密钥 1、配置MySQL的yum仓库 配置yum仓库 更新密钥 rpm --import https://repo.mysql.com/RPM-GPG-KEY-mysql-2022 安装…

Windows 环境Kubernetes安装

目录 前言 安装 Docker 安装 Kubernetes Windows 安装 kubectl 介绍 安装 开启 Kubernetes 前言 Docker作为当前最流行的容器化平台&#xff0c;为Kubernetes提供了强大的容器化技术基础。Kubernetes与Docker的结合&#xff0c;使得容器化应用程序在大规模集群中得以简…