uniapp map 点聚合

此代码可直接运行，重要提示需要编译在小程序开发工具中使用真机预览才可展示如上图所示效果

此代码可直接运行，重要提示需要编译在小程序开发工具中使用真机预览才可展示如上图所示效果

此代码可直接运行，重要提示需要编译在小程序开发工具中使用真机预览才可展示如上图所示效果

本Demo只适用于uniapp“微信小程序” 用HBuilderX开发的小程序。

亲爱的读者朋友们，我2022/06/27又新建了个小程序，完全粘贴我给出的代码，再真机上是可以正常运行的。如果你们有问题，可以发评论提问，我会一一回复，但我回复了读者朋友们你们又不回复我了，不知道你们有没有成功，如果成功了可以回复一下我…不然真不知道大家都是什么情况…

需要看视频的可以看我这篇文章：点此跳转

自定义标注请看这篇：
uniapp map 自定义标注
老规矩上图：

1.点聚合：当地图上需要展示的标记点 marker 过多时，可能会导致界面上 marker 出现压盖，展示不全，并导致整体性能变差。针对此类问题，推出点聚合能力。

所以点聚合就应运而生了。但是官方没有特别好的例子，网上也没有查询到特别好的例子。还好和同事一起完成了现在的demo。

这里有个地方需要提醒一下开发者：

1.当使用uniapp开发微信小程序的时候不光需要看uniapp的官方文档，还需要看微信小程序的官方文档。二者结合使用。
2.有一些功能在uniapp虚拟机中并不会展示，但是在小程序虚拟机中可以展示。
3.有一些功能在uniapp虚拟机和小程序虚拟机都不会展示，需要运行到真机才可以展示（例如：点聚合功能）。

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

上代码

<template>
	<view class="base_body">
		<map :markers="markers" id="map1" style="width: 100%; height: 70%;" :latitude="latitude" :longitude="longitude">
			<cover-view slot="callout">
				<block v-for="(item,index) in markers" :key="index">
					<cover-view class="customCallout" :marker-id="item.id">
						<cover-view class="content">
							{{item.title}}
						</cover-view>
					</cover-view>
				</block>
			</cover-view>
		</map>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				map: '',
				latitude: 39.890, // 地图默认显示的维度
				longitude: 116.39752, // 地图默认显示的纬度

				markers: [{ // 标记点
					id: 1,
					latitude: 39.890,
					longitude: 116.39752,
					title: "点击提示1",
					joinCluster: true,
				}, {
					id: 2,
					latitude: 39.891,
					longitude: 116.39752,
					title: "点击提示2",
					joinCluster: true,
				}, {
					id: 3,
					latitude: 39.892,
					longitude: 116.39752,
					title: "点击提示3",
					joinCluster: true,
				}, {
					id: 4,
					latitude: 39.893,
					longitude: 116.39752,
					title: "点击提示4",
					joinCluster: false,
				}, ],
			}
		},
		onLoad() {

		},
		onReady() {
		},
		methods: {

		}
	}
</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>

重要提示：

此代码可直接运行，重要提示需要编译在小程序开发工具中使用真机预览才可展示如上图所示效果

完结撒花~