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

<template>
	<view class="home-wrap base-container">
		<view class="home-top">
			<view class="home-search">
				<view class="search-wrap">
					<input />
				</view>
				<view class="search-btn">
					搜索
				</view>
			</view>
			<view class="map-wrap">
				 <map
				      id="myMap"
					  class="map-dom"
				      :latitude="center.latitude"
				      :longitude="center.longitude"
				      :markers="clusters"
				      :polyline="[]"
				      :include-points="includePoints"
				      @regionchange="onRegionChange"
				      show-location
				    ></map>
			</view>
		</view>
		<view class="type-wrap">
			<swiper class="swiper" circular :indicator-dots="true" :autoplay="false" :interval="5000"
				:duration="duration">
				<swiper-item>
					<view class="swiper-item">
						<view class="item-type">
							<image class="type-img" src="https://birdseye-img.sysuimars.com/youwei-uniapp/home/type-icon.png" alt="" />
							<view class="type-text">
								全部
							</view>
						</view>
						<view class="item-type">
							<image class="type-img" src="https://birdseye-img.sysuimars.com/youwei-uniapp/home/type-icon-2.png" alt="" />
							<view class="type-text">
								龙眼
							</view>
						</view>
						<view class="item-type">
							<image class="type-img" src="https://birdseye-img.sysuimars.com/youwei-uniapp/home/type-icon-3.png" alt="" />
							<view class="type-text">
								葡萄
							</view>
						</view>
						<view class="item-type">
							<image class="type-img" src="https://birdseye-img.sysuimars.com/youwei-uniapp/home/type-icon.png" alt="" />
							<view class="type-text">
								水蜜桃
							</view>
						</view>
						<view class="item-type">
							<image class="type-img" src="https://birdseye-img.sysuimars.com/youwei-uniapp/home/type-icon-2.png" alt="" />
							<view class="type-text">
								龙眼
							</view>
						</view>
						<view class="item-type">
							<image class="type-img" src="https://birdseye-img.sysuimars.com/youwei-uniapp/home/type-icon-3.png" alt="" />
							<view class="type-text">
								葡萄
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<van-button type="primary">按钮</van-button>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import QQMapWX from 'qqmap-wx-jssdk'


// 广州中心坐标
const GUANGZHOU_CENTER = {
  latitude: 23.12911,
  longitude: 113.26436
}

// 模拟广州的景点数据
const GUANGZHOU_POIS = [
  { id: 1, name: '广州塔', latitude: 23.10641, longitude: 113.32466 },
  { id: 2, name: '白云山', latitude: 23.19746, longitude: 113.30249 },
  { id: 3, name: '越秀公园', latitude: 23.13927, longitude: 113.26436 },
  { id: 4, name: '沙面岛', latitude: 23.10788, longitude: 113.24365 },
  { id: 5, name: '陈家祠', latitude: 23.12632, longitude: 113.24849 },
  { id: 6, name: '北京路', latitude: 23.12389, longitude: 113.26799 },
  { id: 7, name: '上下九', latitude: 23.11696, longitude: 113.24899 },
  { id: 8, name: '荔枝博览园', latitude: 22.99405, longitude: 113.32486 },
  { id: 9, name: '中山纪念堂', latitude: 23.13146, longitude: 113.26336 },
  { id: 10, name: '海心沙', latitude: 23.11446, longitude: 113.32136 }
]

// 响应式数据
const qqmapsdk = ref(null)
const mapContext = ref(null)
const center = ref(GUANGZHOU_CENTER)
const allMarkers = ref([])
const clusters = ref([])
const includePoints = ref([])
const currentZoom = ref(16)


// 初始化地图
const initMap = () => {
  qqmapsdk.value = new QQMapWX({
    key: 'Q5GBZ-2LP6I-LOKGM-UE3UC-TXH7Z-WCFG2' // key
  })
}

// 加载点位数据
const loadPoints = () => {
  allMarkers.value = GUANGZHOU_POIS.map(item => ({
    ...item,
    iconPath: '../../../static/map/point.png',
    width: 30,
    height: 30,
    callout: {
      content: item.name,
      color: '#ffffff',
      bgColor: '#007AFF',
      padding: 5,
      borderRadius: 4,
      display: 'ALWAYS'
    }
  }))
  
  updateClusters()
}

// 更新聚合点
const updateClusters = () => {
  if (currentZoom.value >= 15) {
    // 放大时显示所有点
    clusters.value = allMarkers.value
  } else {
    // 缩小时显示聚合点
    const clusterRadius = 60 / currentZoom.value
    const clustered = []
    
    allMarkers.value.forEach(marker => {
      let isClustered = false
      
      clustered.forEach(cluster => {
        const distance = getDistance(
          cluster.latitude, cluster.longitude,
          marker.latitude, marker.longitude
        )
        
        if (distance < clusterRadius) {
          isClustered = true
          cluster.markers.push(marker)
          cluster.callout.content = `${cluster.markers.length}个地点`
        }
      })
      
      if (!isClustered) {
        clustered.push({
          ...marker,
          markers: [marker],
          callout: {
            ...marker.callout,
            content: marker.name
          }
        })
      }
    })
    
    clusters.value = clustered.map(cluster => ({
      id: cluster.id,
      latitude: cluster.latitude,
      longitude: cluster.longitude,
      iconPath: cluster.markers.length > 1 ? '../../../static/map/point.png' : '../../../static/map/point.png',
      width: cluster.markers.length > 1 ? 40 : 30,
      height: cluster.markers.length > 1 ? 40 : 30,
      callout: cluster.callout,
      clusterData: cluster.markers
    }))
  }
  
  // 设置地图包含所有点
  includePoints.value = allMarkers.value.map(m => ({
    latitude: m.latitude,
    longitude: m.longitude
  }))
}

// 计算两点间距离
// 更精确的距离计算函数（Haversine公式）
const getDistance = (lat1, lng1, lat2, lng2) => {
  // 将经纬度转换为弧度
  const toRad = d => d * Math.PI / 180
  const R = 6371 // 地球半径(km)
  
  const dLat = toRad(lat2 - lat1)
  const dLng = toRad(lng2 - lng1)
  const a = 
    Math.sin(dLat / 2) * Math.sin(dLat / 2) +
    Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) *
    Math.sin(dLng / 2) * Math.sin(dLng / 2)
  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
  
  return R * c * 1000 // 返回米
}

// 地图区域变化事件
const onRegionChange = (e) => {
  if (e.type === 'end') {
    uni.createMapContext('myMap').getScale({
      success: (res) => {
        currentZoom.value = res.scale
        updateClusters()
      }
    })
  }
}

// 搜索地点
const onSearch = (e) => {
  qqmapsdk.value.search({
    keyword: e.value,
    location: center.value,
    success: (res) => {
      allMarkers.value = res.data.map(item => ({
        id: item.id,
        name: item.title,
        latitude: item.location.lat,
        longitude: item.location.lng,
        iconPath: '../../../static/map/point.png',
        callout: {
          content: item.title,
          color: '#ffffff',
          bgColor: '#007AFF',
          padding: 5,
          borderRadius: 4,
          display: 'ALWAYS'
        }
      }))
      
      updateClusters()
    }
  })
}

// 清除搜索
const clearSearch = () => {
  loadPoints()
}

// 生命周期钩子
onMounted(() => {
  // #ifdef MP-WEIXIN
  mapContext.value = uni.createMapContext('myMap', this)
  initMap()
  loadPoints()
  
  // 获取地图区域
  if (mapContext.value && mapContext.value.getRegion) {
    mapContext.value.getRegion({
      success: res => console.log('地图范围:', res),
      fail: err => console.error('地图异常:', err) 
    })
  }
  // #endif
})

</script>

<style lang="scss" scoped>
	.home-wrap {
		background-color: #F2F3F5;
		padding: 0;
		.home-top {
			padding: 20rpx 24rpx;
			background: linear-gradient(#FFFFFF, rgba(242, 243, 245, 0));
		}
		.home-search {
			display: flex;
			align-items: center;
			width: 100%;
			border: 2rpx solid #FFD95E;
			border-radius: 40rpx;
			margin-bottom: 40rpx;
			.search-wrap {
				flex: 1;
				padding-left: 22rpx;
			}
			.search-btn {
				text-align: center;
				line-height: 52rpx;
				border-radius: 40rpx;
				font-size: 28rpx;
				background-color: #FFD95E;
				margin: 6rpx 8rpx;
				width: 112rpx;
				height: 52rpx;
			}
		}
		.map-wrap {
			height: 280rpx;
			.map-dom {
				width: 100%;
				height: 100%;
			}
		}
		.type-wrap {
			margin: 20rpx;
			padding: 20rpx 20rpx 10rpx 20rpx;
			background-color: #fff;
			border-radius: 16rpx;
			height: 200rpx;
			box-sizing: border-box;
			.swiper-item {
				display: flex;
				align-items: center;
				.item-type {
					text-align: center;
					font-size: 24rpx;
					.type-img {
						width: 92rpx;
						height: 92rpx;
					}
				}
				.item-type + .item-type {
					padding-left: 22rpx;
				}
			}
			::v-deep {
				.uni-swiper-dot {
					width: 12rpx;
					height: 6rpx;
					border-radius: 24rpx;
					margin-right: 4rpx;
					
				}
				.uni-swiper-dot.uni-swiper-dot-active {
					background-color: #F3C11D;
					width: 26rpx;
				}
			}
			.swiper {
				height: 170rpx;
			}
		}
	}
</style>