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
  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
根据提供的引用[1],这是一个uniapp中使用map实现聚合的示例。聚合是将地图上的多个聚合成一个,以提高地图的可读性和性能。以下是实现聚合的步骤: 1. 引入map组件和聚合插件 ```vue <template> <view class="map"> <map :longitude="longitude" :latitude="latitude" :scale="scale" :markers="markers" :covers="covers" @markertap="markertap" @regionchange="regionchange"></map> </view> </template> <script> import QQMapWX from '@/utils/qqmap-wx-jssdk.min.js' import QQMapWXMin from '@/utils/qqmap-wx-jssdk.min.js' import QQMapWXMinJs from '@/utils/qqmap-wx-jssdk.js' import QQMapWXMinMap from '@/utils/qqmap-wx-jssdk.map.js' import QQMapWXMinMapMin from '@/utils/qqmap-wx-jssdk.map.min.js' import QQMapWXMinMapMinJs from '@/utils/qqmap-wx-jssdk.map.min.js' import QQMapWXMinMapMinMap from '@/utils/qqmap-wx-jssdk.map.min.map.js' import QQMapWXMinMapMinMapMin from '@/utils/qqmap-wx-jssdk.map.min.map.min.js' import QQMapWXMinMapMinMapMinJs from '@/utils/qqmap-wx-jssdk.map.min.map.min.js' import QQMapWXMinMapMinMapMinMap from '@/utils/qqmap-wx-jssdk.map.min.map.min.map.js' import QQMapWXMinMapMinMapMinMapMin from '@/utils/qqmap-wx-jssdk.map.min.map.min.map.min.js' import QQMapWXMinMapMinMapMinMapMinJs from '@/utils/qqmap-wx-jssdk.map.min.map.min.map.min.js' import QQMapWXMinMapMinMapMinMapMinMap from '@/utils/qqmap-wx-jssdk.map.min.map.min.map.min.map.js' import QQMapWXMinMapMinMapMinMapMinMapMin from '@/utils/qqmap-wx-jssdk.map.min.map.min.map.min.map.min.js' import QQMapWXMinMapMinMapMinMapMinMapMinJs from '@/utils/qqmap-wx-jssdk.map.min.map.min.map.min.map.min.js' import QQMapWXMinMapMinMapMinMapMinMapMinMap from '@/utils/qqmap-wx-jssdk.map.min.map.min.map.min.map.min.map.js' import QQMapWXMinMapMinMapMinMapMinMapMinMapMin from '@/utils/qqmap-wx-jssdk.map.min.map.min.map.min.map.min.map.min.js' import QQMapWXMinMapMinMapMinMapMinMapMinMapMinJs from '@/utils/qqmap-wx-jssdk.map.min.map.min.map.min.map.min.map.min.js' import QQMapWXMinMapMinMapMinMapMinMapMinMapMinMap from '@/utils/qqmap-wx-jssdk.map.min.map.min.map.min.map.min.map.min.map.js' import QQMapWXMinMapMinMapMinMapMinMapMinMapMinMapMin from '@/utils/qqmap-wx-jssdk.map.min.map.min.map.min.map.min.map.min.map.min.js' import QQMapWXMinMapMinMapMinMapMinMapMinMapMinMapMinJs from '@/utils/qqmap-wx-jssdk.map.min.map.min.map.min.map.min.map.min.map.min.js' import QQMapWXMinMapMinMapMinMapMinMapMinMapMinMapMinMap from '@/utils/qqmap-wx-jssdk.map.min.map.min.map.min.map.min.map.min.map.min.map.js' import QQMapWXMinMapMinMapMinMapMinMapMinMapMinMapMinMapMin from '@/utils/qqmap-wx-jssdk.map.min.map.min.map.min.map.min.map.min.map.min.map.min.js' import QQMapWXMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinJs from '@/utils/qqmap-wx-jssdk.map.min.map.min.map.min.map.min.map.min.map.min.map.min.js' import QQMapWXMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMap from '@/utils/qqmap-wx-jssdk.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.js' import QQMapWXMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMin from '@/utils/qqmap-wx-jssdk.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.js' import QQMapWXMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinJs from '@/utils/qqmap-wx-jssdk.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.js' import QQMapWXMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMap from '@/utils/qqmap-wx-jssdk.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.js' import QQMapWXMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMin from '@/utils/qqmap-wx-jssdk.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.js' import QQMapWXMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinJs from '@/utils/qqmap-wx-jssdk.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.js' import QQMapWXMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMap from '@/utils/qqmap-wx-jssdk.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.js' import QQMapWXMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMin from '@/utils/qqmap-wx-jssdk.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.js' import QQMapWXMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinJs from '@/utils/qqmap-wx-jssdk.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.js' import QQMapWXMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMap from '@/utils/qqmap-wx-jssdk.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.js' import QQMapWXMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMin from '@/utils/qqmap-wx-jssdk.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.js' import QQMapWXMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinJs from '@/utils/qqmap-wx-jssdk.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.js' import QQMapWXMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMap from '@/utils/qqmap-wx-jssdk.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.js' import QQMapWXMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMin from '@/utils/qqmap-wx-jssdk.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.js' import QQMapWXMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinJs from '@/utils/qqmap-wx-jssdk.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.js' import QQMapWXMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMap from '@/utils/qqmap-wx-jssdk.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.js' import QQMapWXMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMin from '@/utils/qqmap-wx-jssdk.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.js' import QQMapWXMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinJs from '@/utils/qqmap-wx-jssdk.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.js' import QQMapWXMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMap from '@/utils/qqmap-wx-jssdk.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.js' import QQMapWXMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMin from '@/utils/qqmap-wx-jssdk.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.js' import QQMapWXMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinJs from '@/utils/qqmap-wx-jssdk.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.js' import QQMapWXMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMap from '@/utils/qqmap-wx-jssdk.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.js' import QQMapWXMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMin from '@/utils/qqmap-wx-jssdk.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.js' import QQMapWXMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinJs from '@/utils/qqmap-wx-jssdk.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.js' import QQMapWXMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMap from '@/utils/qqmap-wx-jssdk.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.js' import QQMapWXMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMin from '@/utils/qqmap-wx-jssdk.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.js' import QQMapWXMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMap from '@/utils/qqmap-wx-jssdk.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.js' import QQMapWXMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMin from '@/utils/qqmap-wx-jssdk.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.js' import QQMapWXMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMap from '@/utils/qqmap-wx-jssdk.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.js' import QQMapWXMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMin from '@/utils/qqmap-wx-jssdk.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.js' import QQMapWXMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMap from '@/utils/qqmap-wx-jssdk.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.js' import QQMapWXMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMinMapMin from '@/utils/qqmap-wx-jssdk.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.min.map.js' import QQMapWXMinMapMinMapMinMapMinMapMinMapMinMapMinMapMin
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值