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

<template>
  <view class="garden-page">
    <map
      id="mapId"
      :latitude="latitude"
      :longitude="longitude"
	  :layers="layers"
      @markertap="onMarkerTap"
      @callouttap="onCalloutTap"
      @labeltap="onLabelTap"
      :markers="markers"
      :include-points="includePoints"
	  :enable-satellite="true"
      show-location
      style="width: 100%; height: 100vh;"
    ></map>
	
	<view class="top-mask"></view>
	
	<view class="garden-info">
		<view class="panel-title">
			<view class="title-l">
				<image class="garden-img" :src="`${config.BASIC_IMG}home/garden.png`" mode=""></image>
				<view class="title-info">
					<view class="title-garden">
						从化荔枝博览园
					</view>
					<view class="btn-second">
						有味指数
						<text>4.5分</text>
					</view>
				</view>
			</view>
			<view class="title-r">
				<text class="add-text">进店</text>
			</view>
		</view>
	</view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
	import config from "@/api/config.js"

const latitude = ref(23.584863449735067)
const longitude = ref(113.61702297075017)

const markers = ref([])
const includePoints = ref([])
const mapCtx = ref(null)
const img = ref('../../../../static/map/tree.png')
// const layers = [
//         {
//           // 添加腾讯地图默认底图（可选）
//           type: 'vector',
//           subdomains: ['0', '1', '2'],
//           url: 'https://{s}.map.qq.com/tile/{z}/{x}/{y}',
//           zIndex: 0,
//         },
//         {
//           // 叠加天地图影像（WMTS）
//           type: 'wmts',
//           layer: 'img',
// 		  url: 'https://t{s}.tianditu.gov.cn/img_c/wmts?tk=e95115c454a663cd052d96019fd83840&service=wmts&request=GetTile&version=1.0.0&layer=img&style=default&tilematrixset=c&format=tiles',
//           // url: 'https://t{s}.tianditu.gov.cn/img_c/wmts?tk=e95115c454a663cd052d96019fd83840',
//           tileMatrixSet: 'c',
//           subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
//           zIndex: 1,
//         }
//       ]
	  
	  const tiandituKey = 'e95115c454a663cd052d96019fd83840'
const layers = ref([
  {
    // 腾讯地图矢量底图
    type: 'vector',
    subdomains: ['0', '1', '2'],
    url: 'https://{s}.map.qq.com/tile/{z}/{x}/{y}',
    zIndex: 0
  },
  {
    // 天地图影像底图
    type: 'raster',
    tileSize: 256,
    tiles: [
      `https://t0.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tiandituKey}`,
      `https://t1.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tiandituKey}`,
      `https://t2.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tiandituKey}`,
      `https://t3.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tiandituKey}`,
      `https://t4.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tiandituKey}`,
      `https://t5.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tiandituKey}`,
      `https://t6.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tiandituKey}`,
      `https://t7.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tiandituKey}`
    ],
    zIndex: 1
  }
])

onMounted(() => {
  // #ifdef MP-WEIXIN
  mapCtx.value = uni.createMapContext('mapId')
  mapCtx.value.on('markerClusterClick', res => {
    console.log('markerClusterClick', res)
  })
  
  setTimeout(() => {
      mapCtx.value.getMapProperties({
        success: (res) => {
          console.log('地图属性:', res)
        }
      })
    }, 1000)
  
  bindEvent()
  // #endif
  
  
})

const bindEvent = () => {
  // #ifdef MP-WEIXIN
  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: 30,
          height: 30,
		  color: "#fff",
          bgColor: '#FFCB3C',
          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: 40,
    height: 40,
    joinCluster: true, // 指定了该参数才会参与聚合
    label: {
      // width: 50,
      height: 30,
	  color: "#fff",
      // borderWidth: 1,
      // borderRadius: 4,
      // bgColor: '#FFCB3C',
	  anchorX: -26,
	  anchorY: -60,
      content: ''
    }
  }

  const positions = [
    { latitude: 23.584863449735067, longitude: 113.61702297075017},
    { 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 = `果树名字 ${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>

<style lang="scss" scoped>
	.garden-page {
		height: 100vh;
		width: 100%;
		position: relative;
		
		.top-mask {
			position: absolute;
			z-index: 1;
			top: 0%;
			left: 0%;
			width: 100%;
			height: 464rpx;
			pointer-events: none;
			background: linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
		}
		.garden-info {
			position: absolute;
			z-index: 2;
			top: 0%;
			left: 0%;
			width: 100%;
			.panel-title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 24rpx;
			
				.title-l {
					flex: 1;
					display: flex;
					align-items: center;
			
					.garden-img {
						width: 100rpx;
						height: 100rpx;
						border-radius: 10rpx;
					}
			
					.title-info {
						padding-left: 20rpx;
			
						.title-garden {
							color: #fff;
							font-size: 28rpx;
							font-weight: 600;
							padding-bottom: 10rpx;
						}
			
						.btn-second {
							padding: 0 30rpx;
							border-radius: 40rpx;
							font-size: 24rpx;
							color: #F3C11D;
							border: 2rpx solid #F3C11D;
							background: rgba(255, 217, 94, 0.28);
							height: 42rpx;
							line-height: 40rpx;
						}
					}
				}
			
				.title-r {
					display: flex;
					font-size: 24rpx;
					padding: 8rpx 22rpx;
					background: #FFFFFF;
					border-radius: 30rpx;
			
					.add-text {
						padding-left: 6rpx;
						font-weight: 600;
					}
				}
			}
		}
	}
</style>