展示：

初始化为点聚合：

放大后出现细节图：

这里注意：

1 放大的效果，如果是手机端小程序双指放大即可，如果是PC端开发者工具则是要鼠标放大后再点击一下。

2 点聚合的效果默认出现红色坐标。且无法因为放大后清除，所以只能在放大的效果后再放入一个跳转的图标作为跳转的示意。

代码：

js:
 

// pages/map/map.js
const QQMapWX = require('../../libs/qqmap-wx-jssdk.js');  // 使用 require 代替 import
const config = require('../../utils/config.js');
 
// 实例化腾讯地图API
const qqmapsdk = new QQMapWX({
  key: config.qqmapsdkkey
});
 

Page({
  data: {
    buildingList: [],    // 存储建筑物列表
    map: null, // 用来存储地图实例
    longitude: 116.397428, // 默认经度
    latitude: 39.90923,    // 默认纬度
 
  },


  // // 监听地图区域变化
  onRegionChange(e) {
    if (e.type === 'end') {
      const currentScale = e.detail.scale;
      this.setData({
        scale: currentScale
      });
      console.log('当前缩放级别:', currentScale);

      // 根据缩放级别判断是否显示文字标记
      this.updateMarkers(currentScale);
    }
  },



  onReady() {
    // 获取地图组件实例
    const map = wx.createMapContext('map');

    this.setData({
      map: map,
    });

    // 初始化地图
    this.initMap(map);
  },



  // 更新地图标记
updateMarkers(scale) {
  const updatedMarkers = this.data.buildingList.map(marker => {
    // 判断缩放级别是否大于17.4，决定是否显示文字标记
    if (scale > 17.4) {
      marker.joinCluster = false;
      
    } else {
      marker.joinCluster = true; // 隐藏文字标记
  
    }
    return marker;
  });

  // 更新标记数据
  this.setData({
    buildingList: updatedMarkers
  });

  // 获取地图实例
  const map = this.data.map;

  // 清除当前地图上的标记
  map.removeMarkers({
    markerIds: this.data.buildingList.map(marker => marker.id) // 移除已有标记
  });

  // 更新地图标记
  map.addMarkers({
    markers: updatedMarkers,
    success: function () {
      console.log("Markers updated successfully.");
    },
    fail: function () {
      console.log("Failed to update markers.");
    }
  });
},

// 初始化地图
initMap(map) {
  wx.request({
    url: `${config.BASE_URL}/building/hobby/list`,
    method: 'GET',
    success: (res) => {
      if (res.data.code === 200) {
        const newData = res.data.rows.map(item => ({
          // ...item,
          id: item.hobbyId,
          title: item.currentName,
          latitude: item.latitude,
          longitude: item.longitude,
          iconPath: '/static/images/icon/export.png',
          anchor: { x: -0.1, y: 1 },  // 锚点位于图标的底部中点 右移5像素
          width: 20,
          height: 20,
          label: {
            content: item.currentName,
            color: '#ffffff',
            fontSize: 12,
            borderRadius: 5,
            bgColor: '#000000',
            padding: 2
          },
          joinCluster: true,
        }));

        // 更新数据
        this.setData({
          buildingList: newData,
        });

        // 获取地图实例
        const map = this.data.map;

        // 清除当前地图上的所有标记
        map.removeMarkers({
          markerIds: this.data.buildingList.map(marker => marker.id)
        });

        // 设置地图标记
        map.addMarkers({
          markers: this.data.buildingList,
          success: function () {
            console.log("Markers added successfully.");
          },
          fail: function () {
            console.log("Failed to add markers.");
          }
        });

        // 确保地图显示所有标记点
        map.includePoints({
          points: this.data.buildingList.map(marker => ({
            latitude: marker.latitude,
            longitude: marker.longitude
          })),
          padding: [50] // 设置地图的边距，确保标记点不被覆盖
        });

      } else {
        wx.showToast({
          title: '数据加载失败',
          icon: 'none',
        });
      }
    },
    fail: () => {
      wx.showToast({
        title: '请求失败',
        icon: 'none',
      });
    },
    complete: () => {
      this.setData({
        isLoading: false, // 加载完成，解除加载中状态
      });
    },
  });
},



  // 点击标记点事件
  onMarkerTap(e) {
    console.log(e);
    const markerId = e.markerId;
    const marker = this.data.buildingList.find(item => item.id === markerId);
    if (marker) {
      
      
      const hobbyId=marker.id;
      const currentName=marker.title;
      const longitude=marker.longitude;
      const latitude=marker.latitude;
      // 使用 wx.navigateTo 跳转到详情页面，并将 item 作为查询参数传递
      wx.navigateTo({
        url: `/pages/detail/detail?id=${hobbyId}&title=${currentName}&longitude=${longitude}&latitude=${latitude}`
      });
      
      // wx.showModal({
      //   title: '建筑物信息',
      //   content: `经度: ${marker.longitude}, 纬度: ${marker.latitude}`,
      //   showCancel: false
      // });
    }
  },
  
});

wxml:
 

<view class="container">
  <map

    longitude="{
   
   {longitude}}"
    latitude="{
   
   {latitude}}"
    scale="15"
    markers="{
   
   {markers}}"
    bindregionchange="onRegionChange"
    bindmarkertap="onMarkerTap"
    show-location
    enable-3d
    id="map"
    style="width: 100%; height: 100vh;">
  </map>



</view>