【愚公系列】2022年04月 微信小程序-地图的使用之点聚合

---

前言

地图基础属性：

属性	类型	默认值	必填	说明	最低版本
longitude	number		是	中心经度	1.0.0
latitude	number		是	中心纬度	1.0.0
scale	number	16	否	缩放级别，取值范围为3-20	1.0.0
min-scale	number	3	否	最小缩放级别	2.13.0
max-scale	number	20	否	最大缩放级别	2.13.0
markers	Array.		否	标记点	1.0.0
covers	Array.		否	即将移除，请使用 markers	1.0.0
polyline	Array.		否	路线	1.0.0
circles	Array.		否	圆	1.0.0
controls	Array.		否	控件（即将废弃，建议使用 cover-view 代替）	1.0.0
include-points	Array.		否	缩放视野以包含所有给定的坐标点	1.0.0
show-location	boolean	false	否	显示带有方向的当前定位点	1.0.0
polygons	Array.		否	多边形	2.3.0
subkey	string		否	个性化地图使用的key	2.3.0
layer-style	number	1	否	个性化地图配置的 style，不支持动态修改
rotate	number	0	否	旋转角度，范围 0 ~ 360, 地图正北和设备 y 轴角度的夹角	2.5.0
skew	number	0	否	倾斜角度，范围 0 ~ 40 , 关于 z 轴的倾角	2.5.0
enable-3D	boolean	false	否	展示3D楼块	2.3.0
show-compass	boolean	false	否	显示指南针	2.3.0
show-scale	boolean	false	否	显示比例尺，工具暂不支持	2.8.0
enable-overlooking	boolean	false	否	开启俯视	2.3.0
enable-zoom	boolean	true	否	是否支持缩放	2.3.0
enable-scroll	boolean	true	否	是否支持拖动	2.3.0
enable-rotate	boolean	false	否	是否支持旋转	2.3.0
enable-satellite	boolean	false	否	是否开启卫星图	2.7.0
enable-traffic	boolean	false	否	是否开启实时路况	2.7.0
enable-poi	boolean	true	否	是否展示 POI 点	2.14.0
enable-building	boolean		否	是否展示建筑物	2.14.0
setting	object		否	配置项	2.8.2
bindtap	eventhandle		否	点击地图时触发，2.9.0起返回经纬度信息	1.0.0
bindmarkertap	eventhandle		否	点击标记点时触发，e.detail = {markerId}	1.0.0
bindlabeltap	eventhandle		否	点击label时触发，e.detail = {markerId}	2.9.0
bindcontroltap	eventhandle		否	点击控件时触发，e.detail = {controlId}	1.0.0
bindcallouttap	eventhandle		否	点击标记点对应的气泡时触发e.detail = {markerId}	1.2.0
bindupdated	eventhandle		否	在地图渲染更新完成时触发	1.6.0
bindregionchange	eventhandle		否	视野发生变化时触发，	2.3.0
bindpoitap	eventhandle		否	点击地图poi点时触发，e.detail = {name, longitude, latitude}	2.3.0
bindanchorpointtap	eventhandle		否	点击定位标时触发，e.detail = {longitude, latitude}	2.13.0

marker

标记点用于在地图上显示标记的位置

属性	说明	类型	必填	备注	最低版本
id	标记点 id	number	否	marker 点击事件回调会返回此 id。
clusterId	聚合簇的 id	Number	否	自定义点聚合簇效果时使用
joinCluster	是否参与点聚合	Boolean	否	默认不参与点聚合
latitude	纬度	number	是	浮点数，范围 -90 ~ 90
longitude	经度	number	是	浮点数，范围 -180 ~ 180
title	标注点名	string	否	点击时显示，callout 存在时将被忽略
zIndex	显示层级	number	否		2.3.0
iconPath	显示的图标	string	是	项目目录下的图片路径，支持网络路径、本地路径、代码包路径（2.3.0）
rotate	旋转角度	number	否	顺时针旋转的角度，范围 0 ~ 360，默认为 0
alpha	标注的透明度	number	否	默认 1，无透明，范围 0 ~ 1
width	标注图标宽度	number/string	否	默认为图片实际宽度
height	标注图标高度	number/string	否	默认为图片实际高度
callout	标记点上方的气泡窗口	Object	否	支持的属性见下表，可识别换行符。	1.2.0
customCallout	自定义气泡窗口	Object	否	支持的属性见下表
label	为标记点旁边增加标签	Object	否	支持的属性见下表，可识别换行符。	1.2.0
anchor	经纬度在标注图标的锚点，默认底边中点	Object	否	{x, y}，x 表示横向(0-1)，y 表示竖向(0-1)。{x: .5, y: 1} 表示底边中点	1.2.0
aria-label	无障碍访问，（属性）元素的额外描述	string	否		2.5.0

marker 上的气泡 callout

属性	说明	类型	最低版本
content	文本	string	1.2.0
color	文本颜色	string	1.2.0
fontSize	文字大小	number	1.2.0
borderRadius	边框圆角	number	1.2.0
borderWidth	边框宽度	number	2.3.0
borderColor	边框颜色	string	2.3.0
bgColor	背景色	string	1.2.0
padding	文本边缘留白	number	1.2.0
display	‘BYCLICK’:点击显示; ‘ALWAYS’:常显	string	1.2.0
textAlign	文本对齐方式。有效值: left, right, center	string	1.6.0
anchorX	横向偏移量，向右为正数	number	2.11.0
anchorY	纵向偏移量，向下为正数	number	2.11.0

marker 上的自定义气泡 customCallout

customCallout 存在时将忽略 callout 与 title 属性。自定义气泡采用采用 cover-view 定制，灵活度更高。

属性	说明	类型	最低版本
display	‘BYCLICK’:点击显示; ‘ALWAYS’:常显	string	2.12.0
anchorX	横向偏移量，向右为正数	number	2.12.0
anchorY	纵向偏移量，向下为正数	number	2.12.0

marker 上的气泡 label

属性	说明	类型	最低版本
content	文本	string	1.2.0
color	文本颜色	string	1.2.0
fontSize	文字大小	number	1.2.0
x	label的坐标（废弃）	number	1.2.0
y	label的坐标（废弃）	number	1.2.0
anchorX	label的坐标，原点是 marker 对应的经纬度	number	2.1.0
anchorY	label的坐标，原点是 marker 对应的经纬度	number	2.1.0
borderWidth	边框宽度	number	1.6.0
borderColor	边框颜色	string	1.6.0
borderRadius	边框圆角	number	1.6.0
bgColor	背景色	string	1.6.0
padding	文本边缘留白	number	1.6.0
textAlign	文本对齐方式。有效值: left, right, center	string	1.6.0

一、点聚合

1.wxml

<map 
  id="mapId"
  class="map"
  latitude="{{latitude}}"
  longitude="{{longitude}}"
  bindmarkertap="onMarkerTap"
  bindcallouttap="onCalloutTap"
  bindlabeltap="onLabelTap"
></map>

<view class="btn-area service">
  <button bindtap="removeMarkers">
    移除参与聚合点的marker
  </button>
  <button bindtap="addMarkers">
    添加聚合点marker
  </button>
</view>

2.js

const app = getApp()
const img = '../image/location.png'

Page({
  data: {
    latitude: 23.099994,
    longitude: 113.324520,
  },
  onLoad: function () {
    this.mapCtx = wx.createMapContext('mapId')

    this.mapCtx.on('markerClusterClick', res =>{
      console.log('markerClusterClick', res)
    })

    // 使用默认聚合效果时可注释下一句
    this.bindEvent()
  },

  bindEvent() {
    this.mapCtx.initMarkerCluster({
      enableDefaultStyle: false,
      zoomOnClick: true,
      gridSize: 60,
      complete(res) {
        console.log('initMarkerCluster', res)
      }
    })

    // enableDefaultStyle 为 true 时不会触发改事件
    this.mapCtx.on('markerClusterCreate', res => {
      console.log('clusterCreate', res)
      const clusters = res.clusters
      const markers = clusters.map(cluster => {
        const {
          center,
          clusterId,
          markerIds
        } = cluster
        return  {
          ...center,
          width: 0,
          height: 0,
          clusterId, // 必须
          label: {
            content: markerIds.length + '',
            fontSize: 20,
            width: 60,
            height: 60,
            bgColor: '#00ff00',
            borderRadius: 30,
            textAlign: 'center',
            anchorX: 0,
            anchorY: -30,
          }
        }
      })
      this.mapCtx.addMarkers({
        markers,
        clear: false,
        complete(res) {
          console.log('clusterCreate addMarkers', res)
        }
      })
    })
    
  },

  addMarkers() {
    const marker = {
      id: 1,
      iconPath: img,
      width: 50,
      height: 50,
      joinCluster: true, // 指定了该参数才会参与聚合
      label:{
        width: 50,
        height: 30,
        borderWidth: 1,
        borderRadius: 10,
        bgColor: '#ffffff'
      }
    }

    const positions = [
      {
        latitude: 23.099994,
        longitude: 113.324520,
      }, {
        latitude: 23.099994,
        longitude: 113.322520,
      }, {
        latitude: 23.099994,
        longitude: 113.326520,
      }, {
        latitude: 23.096994,
        longitude: 113.329520,
      }
    ]
    const markers = []
    positions.forEach((p, i) => {
      const newMarker = Object.assign(marker, p)
      newMarker.id = i + 1
      newMarker.label.content = `label ${i + 1}`
      markers.push(newMarker)

      this.mapCtx.addMarkers({
        markers,
        clear: false,
        complete(res) {
          console.log('addMarkers', res)
        }
      })
    })
  },

  removeMarkers() {
    this.mapCtx.addMarkers({
      clear: true,
      markers: []
    })
  },

  onMarkerTap(e) {
    console.log('@@ markertap', e)
  },
  
  onCalloutTap(e) {
    console.log('@@ onCalloutTap', e)
  },

  onLabelTap(e) {
    console.log('@@ labletap', e)
  }
})

3.实际效果