operation_wx/pages/map/index.js

Page({
  data: {
    // 地图基础配置
    longitude: 121.473701, // 默认上海经度
    latitude: 31.230416,   // 默认上海纬度
    scale: 10,             // 默认缩放级别
    markers: [],           // 所有点位标记（车+电站+用电点）
    activeType: 'car',     // 当前选中的选项卡类型
    currentList: [],       // 当前显示的列表数据

    // 全量点位数据（实际项目替换为接口请求）
    pointData: {
      // 储能车数据
      car: [
        {
          id: 'car001',
          type: 'car',
          name: '储能车SC2026001',
          address: '上海市浦东新区张江高科技园区',
          longitude: 121.473701,
          latitude: 31.230416,
          status: '运行中'
        },
        {
          id: 'car002',
          type: 'car',
          name: '储能车SC2026002',
          address: '上海市徐汇区漕河泾开发区',
          longitude: 121.443875,
          latitude: 31.199337,
          status: '充电中'
        },
        {
          id: 'car003',
          type: 'car',
          name: '储能车SC2026003',
          address: '上海市闵行区紫竹高新区',
          longitude: 121.402099,
          latitude: 31.074742,
          status: '异常'
        }
      ],
      // 电站数据
      station: [
        {
          id: 'station001',
          type: 'station',
          name: '张江电站',
          address: '上海市浦东新区张江路',
          longitude: 121.482000,
          latitude: 31.235000,
          status: '正常运行'
        },
        {
          id: 'station002',
          type: 'station',
          name: '漕河泾电站',
          address: '上海市徐汇区虹漕路',
          longitude: 121.440000,
          latitude: 31.205000,
          status: '正常运行'
        },
        {
          id: 'station003',
          type: 'station',
          name: '青浦电站',
          address: '上海市青浦区华徐公路',
          longitude: 121.165000,
          latitude: 31.158000,
          status: '正常运行'
        }
      ],
      // 用电点数据
      user: [
        {
          id: 'user001',
          type: 'user',
          name: '陆家嘴商业中心',
          address: '上海市浦东新区陆家嘴环路',
          longitude: 121.506377,
          latitude: 31.238039,
          status: '用电正常'
        },
        {
          id: 'user002',
          type: 'user',
          name: '人民广场商圈',
          address: '上海市黄浦区人民大道',
          longitude: 121.473081,
          latitude: 31.230664,
          status: '用电正常'
        },
        {
          id: 'user003',
          type: 'user',
          name: '虹桥商务区',
          address: '上海市闵行区申虹路',
          longitude: 121.328000,
          latitude: 31.198000,
          status: '用电正常'
        }
      ]
    },

    // 标记点图标配置（替换为你的实际图标路径）
    markerIcons: {
      car: '/images/car.png',      // 储能车图标
      station: '/images/station.png', // 电站图标
      user: '/images/user.png'     // 用电点图标
    },

    // 地图上下文（用于平滑操作）
    mapCtx: null
  },

  onLoad(options) {
    // 1. 创建地图上下文
    this.mapCtx = wx.createMapContext('map', this);
    
    // 2. 检查是否有定位参数（从详情页跳转回来）
    if (options.targetId && options.lng && options.lat) {
      this.smoothLocateToPoint({
        longitude: Number(options.lng),
        latitude: Number(options.lat)
      }, 17);
    }

    // 3. 初始化所有点位（地图永久显示所有标记）
    this.initAllMarkers();
    
    // 4. 初始化默认列表（储能车）
    this.switchType({ currentTarget: { dataset: { type: 'car' } } });
  },

  /**
   * 初始化所有点位：合并+平滑适配视野+生成标记
   */
  initAllMarkers() {
    // 合并所有三类点位
    const allPoints = [
      ...this.data.pointData.car,
      ...this.data.pointData.station,
      ...this.data.pointData.user
    ];
    
    // 生成所有标记点
    this.generateAllMarkers(allPoints);
    
    // 平滑适配所有点位视野
    this.smoothFitAllPoints(allPoints);
  },

  /**
   * 平滑适配所有点位视野（核心）
   * @param {Array} pointList 所有点位列表
   */
  smoothFitAllPoints(pointList) {
    if (!pointList || pointList.length === 0) return;
    
    // 格式化点位数据
    const points = pointList.map(item => ({
      longitude: Number(item.longitude),
      latitude: Number(item.latitude)
    })).filter(v => !isNaN(v.longitude) && !isNaN(v.latitude));
    
    // 调用地图原生方法：平滑包含所有点位
    this.mapCtx.includePoints({
      points: points,
      padding: [60, 60, 60, 60], // 边距，避免遮挡
      animation: true // 平滑动画
    });

    // 同步地图数据到页面
    this.syncMapData();
  },

  /**
   * 生成所有三类点位的标记点
   * @param {Array} pointList 所有点位列表
   */
  generateAllMarkers(pointList) {
    if (!pointList || pointList.length === 0) {
      this.setData({ markers: [] });
      return;
    }

    const markers = pointList.map((item, index) => ({
      id: index + 1, // 唯一ID
      longitude: Number(item.longitude),
      latitude: Number(item.latitude),
      iconPath: this.data.markerIcons[item.type] || '/images/car.png',
      width: 40,
      height: 40,
      anchor: { x: 0.5, y: 0.5 }, // 图标中心对准点位
      // 点击弹窗详情
      callout: {
        content: `${item.name}\n${item.address}${item.status ? '\n状态：' + item.status : ''}`,
        fontSize: 24,
        borderRadius: 8,
        bgColor: '#fff',
        padding: 12,
        display: 'BYCLICK',
        textAlign: 'left'
      },
      // 绑定原始数据（用于点击事件）
      customData: item
    }));

    this.setData({ markers });
  },

  /**
   * 平滑定位到单个点位（通用方法）
   * @param {Object} point 点位（含longitude/latitude）
   * @param {Number} targetScale 目标缩放级别
   */
  smoothLocateToPoint(point, targetScale = 17) {
    if (!point || isNaN(point.longitude) || isNaN(point.latitude)) return;

    // 平滑移动地图中心
    this.mapCtx.translateMap({
      longitude: point.longitude - this.data.longitude,
      latitude: point.latitude - this.data.latitude,
      duration: 500,
      animationEnd: () => {
        // 移动完成后平滑缩放
        this.mapCtx.setScale({
          scale: targetScale,
          animation: true,
          duration: 300
        });
      }
    });

    // 更新页面数据
    this.setData({
      longitude: point.longitude,
      latitude: point.latitude,
      scale: targetScale
    });
  },

  /**
   * 同步地图数据到页面（解决数据不一致）
   */
  syncMapData() {
    // 获取当前中心经纬度
    this.mapCtx.getCenterLocation({
      success: (res) => {
        this.setData({
          longitude: res.longitude,
          latitude: res.latitude
        });
      }
    });

    // 获取当前缩放级别
    this.mapCtx.getScale({
      success: (res) => {
        this.setData({ scale: res.scale });
      }
    });
  },

  /**
   * 切换选项卡：仅更新列表，不影响地图
   */
  switchType(e) {
    const type = e.currentTarget.dataset.type;
    this.setData({
      activeType: type,
      currentList: this.data.pointData[type] || []
    });
  },

  /**
   * 列表项点击：跳转至详情页
   */
  toDetailPage(e) {
    const item = e.currentTarget.dataset.item;
    if (!item.id || !item.type) return;

    // 跳转详情页（替换为你的详情页实际路径）
    wx.navigateTo({
      url: `/pages/station-detail/station-detail?id=${item.id}&type=${item.type}`
    });
  },

  /**
   * 标记点点击：平滑定位到该点位
   */
  onMarkerTap(e) {
    const marker = this.data.markers.find(item => item.id === e.detail.markerId);
    if (marker && marker.customData) {
      this.smoothLocateToPoint(marker.customData, 18);
    }
  },

  /**
   * 地图视野变化监听
   */
  onRegionChange(e) {
    if (e.type === 'end') {
      this.syncMapData();
    }
  },

  /**
   * 页面卸载：销毁地图上下文
   */
  onUnload() {
    this.mapCtx = null;
  }
});