重点：此代码复制可直接运行，重要提示需要编译在小程序开发工具中使用“真机预览”才可展示如上图所示效果，一定“真机预览”哟！！！

项目需求聚合点的展示必须是图片的样式展示，不能使用默认样式。

图片展示（本来想弄视频太麻烦了）：

点聚合的最重要的一个地方是在markers中添加 joinCluster = true 这个重要的属性，否则将无法开启点聚合功能，这个在uniapp的官方文档里体现的不是那么清楚，但是在小程序文档提示的就相当清楚。

代码：

<template><view class="base_body"><map :markers="markers"  max-scale="11.9" :scale="scale" id="map" style="width: 100%; height: 100%;" :latitude="latitude":longitude="longitude"></map></view>
</template><script>export default {data() {return {map: '',scale: '8', // 缩放级别，取值范围为3-20latitude: 39.890, // 地图默认显示的维度longitude: 116.39752, // 地图默认显示的纬度markerClickList: [],markers: [],  // 标记点组}},onShow() {// 创建地图对象this.mapCtx = uni.createMapContext('map', this);this.openAggator()  // 如果使用聚合点默认样式 就可以不执行这句代码。},methods: {openAggator() {// 这里的赋值 到时候是‘请求接口’得来的。setTimeout(() => {   // 模拟异步请求接口（一进入页面才能看见聚合点的样式是图片，不然就是默认样式）this.markers = [{ // 标记点id: 1,latitude: 40.8909,longitude: 116.39751,width: 50,height: 50,title: "点击提示1",iconPath: 'https://cdn.uviewui.com/uview/album/1.jpg',joinCluster: true, // 是否参与点聚合callout: {content: '***的位置1',display: 'ALWAYS',padding: 5,textAlign: 'center',color: '#C2874D',borderRadius: 4}}, {id: 2,latitude: 40.10111,longitude: 116.39752,title: "点击提示2",width: 50,height: 50,iconPath: 'https://cdn.uviewui.com/uview/album/1.jpg',joinCluster: true,callout: {content: '***的位置2',display: 'ALWAYS',padding: 5,textAlign: 'center',color: '#C2874D',borderRadius: 4}}, {id: 3,latitude: 39.892,longitude: 116.39752,title: "点击提示3",width: 50,height: 50,iconPath: 'https://cdn.uviewui.com/uview/album/1.jpg',joinCluster: true,callout: {content: '***的位置3',display: 'ALWAYS',padding: 5,textAlign: 'center',color: '#C2874D',borderRadius: 4}}, {id: 4,latitude: 39.893,longitude: 116.39752,width: 50,height: 50,title: "点击提示4",iconPath: 'https://cdn.uviewui.com/uview/album/1.jpg',joinCluster: true,callout: {content: '***的位置4',display: 'ALWAYS',padding: 5,textAlign: 'center',color: '#C2874D',borderRadius: 4}}, ]}, 3000)console.log('监听地图事件');this.mapCtx.initMarkerCluster({ // 初始化点聚合的配置enableDefaultStyle: false, // 是否使用默认样式zoomOnClick: true,gridSize: 60,})// 新的聚合簇产生时触发this.mapCtx.on('markerClusterCreate', res => {console.log(res, '新的聚合簇产生时触发');const clusters = res.clusters // 新产生的聚合簇const markers = clusters.map(cluster => {const {center, // 聚合点的经纬度数组clusterId, // 聚合簇idmarkerIds // 已经聚合了的标记点id数组} = cluster// 聚合点图片显示聚合数组中的第1个let list = this.markers.find(item => (markerIds[0] == item.id))return {...center,width: 50,height: 50,clusterId, // 必须iconPath: list.iconPath,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,}}})// 添加聚合簇this.mapCtx.addMarkers({markers,clear: false, //是否先清空地图上所有的marker})})// 聚合点点击事件this.mapCtx.on('markerClusterClick', res => {console.log(res, '聚合簇的点击事件');const clusters = new Array(res.cluster) // 新产生的聚合簇clusters.map(cluster => {const {center, // 聚合点的经纬度数组clusterId, // 聚合簇idmarkerIds // 已经聚合了的标记点id数组} = clusterlet list = []markerIds.forEach(item => {let newObj = this.markers.find(item1 => (item1.id == item))list.push(newObj)})this.markerClickList = list})// 获取当前地图的缩放级别let _this = this_this.mapCtx.getScale({success(res) {console.log(res.scale, '获取当前地图的缩放级别');// 业务需求，不能看见详细位置，这里配置“max-scale="11.9"”做了限制。 if (res.scale >= 11.9) {  _this.markersList = _this.markerClickList_this.campListShow = trueconsole.log(_this.markerClickList, '无法分裂聚合点数组数据');}}})})},}}
</script><style>.base_body {width: 100%;height: 100%;position: absolute;}/* 水平，垂直居中 */.base_all_center {justify-content: center;align-items: center;}/* 垂直居中 */.base_center_vertical {display: flex;align-items: center;}/* 水平居中 */.base_center_horizontal {display: flex;justify-content: center;}/* 垂直布局 */.base_column {display: flex;flex-direction: column;}/* 横向布局 */.base_row {display: flex;flex-direction: row;}/* 基础dialog */.base_dialog {width: 100%;height: 100%;position: absolute;top: 0px;background: rgba(0, 0, 0, 0.5);}/* *************************************** */.customCallout {box-sizing: border-box;background-color: #fff;border: 1px solid #ccc;border-radius: 30px;width: 150px;height: 40px;display: inline-flex;padding: 5px 20px;justify-content: center;align-items: center;}.content {flex: 0 1 auto;margin: 0 10px;font-size: 14px;}
</style>

如果你们有问题，可以发评论提问，我看见一定回复

完结撒花~~~

uniapp map 点聚合聚合点样式修改相关推荐

百度地图标记聚合器MarkerClusterer结合TextIconOverlay，根据标记点的属性更换聚合器的样式
一.问题公司的项目中在百度地图上生成了成千上万的点,所以使用了标记聚合器MarkerClusterer来处理海量点,但是每个点根据异常类型,分为正常(绿色)和异常(红色),这时如果用了聚合器,只有没 ...
Map端的聚合操作Combiner
需求词频统计,假设有一个文件,统计这个文件词频常见的解决办法例如原始文本是: 交给两个Map去处理,map1处理hello is hello is,map2处理hadoop is hadoop ...
uni-app开发：（源码级别）uni-badge样式修改（自定义插槽）
文章目录 uni-app开发:(源码级别)uni-badge样式修改(自定义插槽) 一.效果图需求说明: 二.源码 · 修改前后对比: 2.1. 修改前 2.2. 修改后三.调用代码: 附件:uni ...
google map for ios聚合
google map for ios聚合必须番羽墙才可以用google map,不管是android手机还是ios,都需要番羽墙才可用....并且android手机还需要装google服务框架 io ...
uniapp - Map地图组件属性示例
目录 1.markers :点标记,用于在地图上显示标记的位置. 2.点聚合: 3.polygons : 4.include-points:可以实现自动缩放展示视图内所有的点标记. 5.polylin ...
UNIAPP实战项目笔记43 购物车页面修改收货地址和修改默认地址
UNIAPP实战项目笔记43 购物车页面修改收货地址和修改默认地址实际案例图片修改收货地址和修改默认地址页面布局和功能具体内容图片自己替换哈,随便找了个图片的做示例用到了vuex的状态机,具体 ...
如何调整uniapp轮播图swiper的样式（dot的样式和位置）
背景官网文档不解释很多,这里我来详细说明下,很简单可以做到任意修改自己想要的效果. 需求我们需要做一个轮播图,其他没什么但是dot的位置要偏上一些,而且样式有要求. 实现利用uniapp官网的d ...
react鼠标移入移出样式修改
解决react鼠标移入移出样式修改的问题. 效果截图: 代码实现: js代码: <div className={styles.listStyle}><MenuonClick={thi ...
html input type=quot;filequot;,科技常识：关于type=quot;filequot;的input框样式修改小结...
今天小编跟大家讲解下有关关于type="file"的input框样式修改小结 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关关于type="file" ...

uniapp map 点聚合聚合点样式修改

重点：此代码复制可直接运行，重要提示需要编译在小程序开发工具中使用“真机预览”才可展示如上图所示效果，一定“真机预览”哟！！！

代码：

如果你们有问题，可以发评论提问，我看见一定回复

uniapp map 点聚合聚合点样式修改相关推荐

最新文章

热门文章

uniapp map 点聚合 聚合点样式修改

重点：此代码复制 可直接运行， 重要提示需要编译在小程序开发工具中使用“真机预览”才可展示如上图所示效果，一定“真机预览”哟！！！

代码：

如果你们有问题，可以发评论提问，我看见一定回复

uniapp map 点聚合 聚合点样式修改相关推荐

最新文章

热门文章

uniapp map 点聚合聚合点样式修改

重点：此代码复制可直接运行，重要提示需要编译在小程序开发工具中使用“真机预览”才可展示如上图所示效果，一定“真机预览”哟！！！

uniapp map 点聚合聚合点样式修改相关推荐