wxamp-ymtxUser/pages/map/map.js

import http from '../../utils/api'
const baseUr = require('../../utils/baseUrl')
Page({

  /**
   * 页面的初始数据
   */
  data: {
    longitude: null,
    latitude: null,
    markers: [],
    activeTab: 'clinic',
    baseUr: baseUr,
    showDetail: false,
    currentMarker: null
  },


  // 切换标签页
  switchTab(e) {
    const tab = e.currentTarget.dataset.tab;
    this.setData({
      activeTab: tab,
      showDetail: false // 切换标签时关闭详情
    });

    // 这里可以添加切换标签后的逻辑
    if (tab === 'clinic') {
      // 药店诊所相关操作
      console.log('切换到药店诊所');
      http.pharmacy({
        data: {},
        success: res => {
          console.log(111, res);
          this.setData({
            markers: res.rows.map((point, index) => ({
              id: point.id,
              title: point.title,
              latitude: point.latitude,
              longitude: point.longitude,
              iconPath: point.iconPath ? baseUr + point.iconPath : '/pages/images/dw.png',
              width: 35,
              height: 35,
              // 添加气泡标签显示名称
              callout: {
                content: point.title,
                color: '#333',
                fontSize: 12,
                borderRadius: 4,
                bgColor: '#ffffff',
                padding: 4,
                display: 'ALWAYS'
              },
              // 保存详细信息
              merchantType: point.merchantType,
              region: point.region,
              address: point.address
            }))
          })
          
          // 调整地图视野以显示所有标记
          if (res.rows.length > 0) {
            this.adjustMapView(res.rows);
          }
        }
      })
    } else if (tab === 'guide') {
      // 办事指南相关操作
      console.log('切换到办事指南');
      http.guidance({
        data: {},
        success: res => {
          console.log(222, res);
          // 清除地图标记
          this.setData({
            markers: []
          });
        }
      })
    }
  },

  // 调整地图视野以显示所有标记点
  adjustMapView(points) {
    const mapContext = wx.createMapContext('myMap', this);
    
    if (points && points.length > 0) {
      // 将点转换为地图需要的格式
      const mapPoints = points.map(point => ({
        latitude: point.latitude,
        longitude: point.longitude
      }));
      
      // 如果有当前位置，也包含在内
      if (this.data.latitude && this.data.longitude) {
        mapPoints.push({
          latitude: this.data.latitude,
          longitude: this.data.longitude
        });
      }
      
      // 调整地图视野
      mapContext.includePoints({
        points: mapPoints,
        padding: [60, 60, 60, 60]
      });
    }
  },

  // 地图标记点击事件
  onMarkerTap(e) {
    const markerId = e.markerId;
    const marker = this.data.markers.find(m => m.id === markerId);
    
    if (marker) {
      this.setData({
        showDetail: true,
        currentMarker: {
          title: marker.title,
          merchantType: marker.merchantType,
          region: marker.region,
          address: marker.address,
          latitude: marker.latitude,
          longitude: marker.longitude
        }
      });
    }
  },

  // 关闭详情
  closeDetail() {
    this.setData({
      showDetail: false,
      currentMarker: null
    });
  },

  // 导航到标记点
  navigateToMarker() {
    if (this.data.currentMarker) {
      const { latitude, longitude, title, address } = this.data.currentMarker;
      
      wx.openLocation({
        latitude: latitude,
        longitude: longitude,
        name: title,
        address: address,
        scale: 18
      });
    }
  },

  // 获取当前位置信息
  getlocation() {
    var that = this
    wx.getLocation({
      isHighAccuracy: true,
      type: 'gcj02',
      success: function (res) {
        console.log(res);
        const latitude = res.latitude;
        const longitude = res.longitude;
        that.setData({
          latitude: latitude,
          longitude: longitude
        });
        
        // 加载初始数据
        that.switchTab({ currentTarget: { dataset: { tab: 'clinic' } } });
      }
    })
  },




  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getlocation()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
    this.setData({
      showDetail: false
    });
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})