您现在的位置是：首页 >技术交流 >微信小程序 腾讯地图 点标记事件 点聚合无法执行事件-放大scale显示文字标记 即监听scale事件网站首页技术交流

展示：

放大scale后：

代码：

wxml:

<map 
  id="map" 
  scale="14" 
  style="width: 100%; height: 100vh;" 
  bindmarkertap="onMarkerTap"
  bindregionchange="onRegionChange"
/>

js：
 

// 引用公共配置文件
const config = require('../../utils/config.js');

Page({
  data: {
    buildingList: [],    // 存储建筑物列表
    map: null, // 用来存储地图实例
    scale: 14,
  },

  // 监听地图区域变化
  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 => {
      // 判断缩放级别是否大于18，决定是否显示文字标记
      if (scale > 17.4) {
        marker.label = {
          content: marker.title,  // 显示建筑物名称
          color: '#000000',
          fontSize: 12
        };
      } else {
        marker.label = null;  // 隐藏文字标记
      }
      return marker;
    });

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

    // 更新地图标记
    const map = this.data.map;
    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?pageNum=1&pageSize=200`,
      method: 'GET',
      success: (res) => {
        if (res.data.code === 200) {
          const newData = res.data.rows.map(item => ({
            ...item,
            id: item.hobbyId,
            title: item.currentName,
            pic: config.BASE_URL + item.pic, // 拼接图片完整路径
            latitude: item.latitude, // 假设你有纬度字段
            longitude: item.longitude, // 假设你有经度字段
            iconPath: item.pic ? config.BASE_URL + item.pic : '/resources/green-dot.png', // 默认图标路径
            width: item.pic ? 40 : 10, // 自定义图标的宽度
            height: item.pic ? 40 : 10, // 自定义图标的高度
            label: null,  // 默认不显示文字标注
          }));

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

          // 设置地图标记
          map.addMarkers({
            markers: this.data.buildingList, // 使用 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, // 加载完成，解除加载中状态
        });
      },
    });
  },
});

解释：

监听scale事件要注意：在微信开发者工具中查看，要放大后拖动才可以，但是手机端查看不需要拖动，直接放大即可监听事件。

------------------------------------------------

点击标记事件：

这里特别注意：点击标记事件，不能和点聚合共同使用。

此外，为了不使用点聚合标记，又要避免默认标记图标过大，可以缩小展示宽高。