开发那点事(十一)微信小程序地图聚合功能实现

写在前面的话

公司项目需求要在微信小程序上实现地图marker点聚合的功能,百度苦寻无果,故自己实现。

最终效果
在这里插入图片描述
示例代码点我获取

核心思路

  • marker标签中的callout属性用来显示聚合点的数量
  • 点击聚合点时,以聚合点为中心放大地图,不需要再次请求后台接口
  • 根据map组件scale缩放级别将地图分成一个一个的小格子,计算小格子中marker点的数量
  • 由于小程序无法像网页端那样处理庞大的数据量,为了提高用户体验,地图状态为缩放或者范围缩小时缓存上次marker数据,无需请求后台接口

关键js文件

  • MapUtil.js (判断是否为缩放状态,根据后台接口数据格式化成地图聚合类型marker数据等)
  • ZjMarker.js(maker点基类,根据简单的参数构建单个marker及聚合marker)

具体实现

MapUtil.js

猜你喜欢

转载自blog.csdn.net/zw21544182/article/details/106048945
今日推荐