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

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

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

图片展示(本来想弄视频太麻烦了):

 点聚合的最重要的一个地方是在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: [],  //
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值