feiniao-youwei-uniapp/pages/tabBar/home/mapComponent.vue

<template>
  <view>
    <map
      id="homeId"
      :latitude="latitude"
      :longitude="longitude"
      @markertap="onMarkerTap"
      @callouttap="onCalloutTap"
      @labeltap="onLabelTap"
      :markers="markers"
      :include-points="includePoints"
      show-location
      style="width: 100%; height: 280rpx; display: block;"
    ></map>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const latitude = ref(23.099994)
const longitude = ref(113.324520)
const markers = ref([])
const includePoints = ref([])
const mapCtx = ref(null)
const img = ref('../../../static/map/point.png')

onMounted(() => {
  // #ifdef MP-WEIXIN
  uni.nextTick(() => {
    mapCtx.value = uni.createMapContext('homeId', this)
    console.log('地图上下文:', mapCtx.value) // 确认是否成功获取
    
    if (mapCtx.value) {
      bindEvent() // 确保上下文存在再调用
    } else {
      console.error('地图上下文获取失败')
    }
  })
  // #endif
})

const bindEvent = () => {
  // #ifdef MP-WEIXIN
  console.log('bindEvent',  mapCtx.value )
  mapCtx.value.initMarkerCluster({
    enableDefaultStyle: false,
    zoomOnClick: true,
    gridSize: 60,
    complete(res) {
      console.log('initMarkerCluster', res)
    }
  })
  
  addMarkers()
  
  mapCtx.value.on('markerClusterCreate', res => {
    console.log('clusterCreate', res)
    const clusters = res.clusters
    const newMarkers = 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,
        }
      }
    })
    mapCtx.value.addMarkers({
      markers: newMarkers,
      clear: false,
      complete(res) {
        console.log('clusterCreate addMarkers', res)
      }
    })
  })
  // #endif
}

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

  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 newMarkers = []
  positions.forEach((p, i) => {
    const newMarker = {...marker, ...p}
    newMarker.id = i + 1
    newMarker.label.content = `label ${i + 1}`
    newMarkers.push(newMarker)
  })
  
  // #ifdef MP-WEIXIN
  mapCtx.value.addMarkers({
    markers: newMarkers,
    clear: false,
    complete(res) {
      console.log('addMarkers', res)
    }
  })
  // #else
  // 非微信平台直接设置 markers
  markers.value = markers.value.concat(newMarkers)
  // 更新包含的点
  includePoints.value = markers.value.map(marker => ({
    latitude: marker.latitude,
    longitude: marker.longitude
  }))
  // #endif
}

const removeMarkers = () => {
  // #ifdef MP-WEIXIN
  mapCtx.value.addMarkers({
    clear: true,
    markers: []
  })
  // #else
  markers.value = []
  // #endif
}

const onMarkerTap = (e) => {
  console.log('@@ markertap', e)
}

const onCalloutTap = (e) => {
  console.log('@@ onCalloutTap', e)
}

const onLabelTap = (e) => {
  console.log('@@ labletap', e)
}
</script>