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

原创

已于 2022-10-22 18:16:49 修改 · 3.6k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #小程序

于 2022-10-22 18:12:59 首次发布

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

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

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

点聚合的最重要的一个地方是在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-20
				latitude: 39.890, // 地图默认显示的维度
				longitude: 116.39752, // 地图默认显示的纬度
				markerClickList: [],
				markers: [],  //