eaXing_app/pages/index/searchDestination/searchDestination.vue

<template>
	<view class="section">
		<view class="cu-bar search bg-white searchIn">
			<view class="search-form round"><text class="cuIcon-search"></text>
				<input type="text" placeholder="搜索目的地" confirm-type="search" @input="inputSearch"
					v-model="stationName" />
			</view>
		</view>

		<view class="map">
			<map style="width: 100%; height:100%;" show-location='true' ref="map" id="map" :latitude="latitude"
				:longitude="longitude" :markers="marker.markers" :scale="scale" @markertap="callouttap"
				@callouttap='callouttap'>
				<view class="" v-if="showSearch">
					<scroll-view scroll-y="true" class="scrollView">
						<view class="cu-bar bg-white solid-bottom" v-for="item in searchData.searchList" :key="item.id"
							@click="goMap(item)">
							<view class="action text-lg">{{item.stationName}}</view>
							<view class="action text-df text-gray">{{item.distance}}km</view>
						</view>
					</scroll-view>
				</view>
			</map>
			<view class="goToast" v-if="showToast">
				<view class=" cu-card bg-white margin-sm card-border">
					<view class="cu-item shadow">
						<view class="flex padding-tb-sm">
							<view class="flex">
								<view class="titleState">营业中</view>
							</view>
							<view class="name">{{searchStationName}}</view>
						</view>
						<view class="flex padding-tb-sm justify-between">
							<view class="flex">
								<view class="lg text-gray cuIcon-location"></view>
								<view class="titleFont text-df text-gray">{{searchAreaName}}</view>
							</view>
							<view class="searchDistance text-df">{{searchDistance}}km</view>
						</view>
						<view class="flex padding-tb-xs justify-center">
							<view class="flex">
								<view class="goDetail" @click="goDetail">查询详情</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import config from '@/common/config/config.js';
	import {
		reactive,
		ref,
	} from "vue";
	import {
		onLoad,
		onShow,
	} from "@dcloudio/uni-app";
	let id = ref(0) // 使用 marker点击事件 需要填写id
	let latitude = ref(39.909)
	let longitude = ref(116.39742)
	let scale = ref(12)
	let marker = reactive({
		markers: []
	})

	const bdlongitude = ref()
	const bdlatitude = ref()
	const stationName = ref()
	const searchData = reactive({
		searchList: []
	})
	const showSearch = ref(false)
	const showToast = ref(false)


	const searchStationName = ref()
	const searchAreaName = ref()
	const searchDistance = ref()

	const showPoints = reactive({
		pointList: []
	})
	const searchNo = ref()
	const pointsList = ref()
	
	onLoad(() => {
		let location = uni.getStorageSync('location');
		latitude.value = bdlatitude.value = location.latitude
		longitude.value = bdlongitude.value = location.longitude
		// 所有的电站展示
		var urlLocal = config.wxUrl_baseinfo + "stationInfo/searchNearby?latitude=" + bdlatitude.value +
			"&longitude=" + bdlongitude.value;
		uni.$request({
			url: urlLocal
		}).then((res) => {
			console.log(res,'res');
			if (res.data.data.data.list.length > 0) {
				let copy=JSON.parse(JSON.stringify(res.data.data.data.list))
				pointsList.value=copy
				showPoints.pointList = copy
				setMarkersAndCluster(showPoints.pointList) // 3、调用聚合功能 
			}
		})
	})
	onShow(() => {

	})

	const setMarkersAndCluster = (markerList) => {
		let mapContext = uni.createMapContext('map')
		// 1.组装数据之后，并赋值给地图上的marker
		const allMarkers = Array.from(markerList).map((e, i) => {
			return {
				id: e.id,
				longitude: e.longitude,
				latitude: e.latitude,
				iconPath: '../../../static/home/marker.png',
				rotate: 0, // 旋转度数
				width: 40, //宽
				height: 40, //高
				alpha: 1, //透明
				joinCluster: true,//参与点聚合
				callout: {
					content: e.stationName,
					color: '#000',
					fontSize: 14,
					display: 'ALWAYS',
					padding: 8,
					bgColor: "#fff",
					borderRadius: 5
				},
			}
		});
		marker.markers = allMarkers
		mapContext.moveToLocation({
			longitude: Number(marker.markers[0].longitude),
			latitude: Number(marker.markers[0].latitude)
		})

		// 2.初始化点聚合的配置，未调用时采用默认配置
		mapContext.initMarkerCluster({
			enableDefaultStyle: false, // 是否启用默认的聚合样式(是否用自定义图标)
			zoomOnClick: true,
			gridSize: 60,
			complete(res) {
				// console.log('initMarkerCluster', res)
			}
		});

		// 3.发生聚合时，给聚合点设置marker标签
		mapContext.on('markerClusterCreate', res => {
			console.log('clusterCreate', res)
			const clusters = res.clusters
			const markers = clusters.map(cluster => {
				const {
					center,
					clusterId,
					markerIds
				} = cluster

				return {
					...center,
					width: 0,
					height: 0,
					clusterId, // 必须
					label: {
						content: markerIds.length + '',
						fontSize: 20,
						color: '#fff',
						width: 50,
						height: 50,
						bgColor: '#4C91FF',
						borderRadius: 25,
						textAlign: 'center',
						anchorX: 0,
						anchorY:-50,
					}
				}
			})
			// 4. 添加聚合簇标签
			mapContext.addMarkers({
				markers,
				clear: false,
				complete(res) {
					// console.log('clusterCreate addMarkers', res)
				}
			})
		})

	}







	const inputSearch = () => {
		showSearch.value = true
		showToast.value = false
		var url = config.wxUrl_baseinfo + "stationInfo/searchNearby?stationName=" +
			stationName.value + "&latitude=" + bdlatitude.value +
			"&longitude=" + bdlongitude.value;
		uni.$request({
			url: url
		}).then((res) => {
			searchData.searchList = res.data.data.data.list
		})



	}
	const goMap = (e) => {
		showSearch.value = false //关闭搜索展示列表
		showToast.value = true
		console.log(e, 'eeeeeeeeeee');
		searchStationName.value = e.stationName
		searchAreaName.value = e.areaName
		searchDistance.value = e.distance
		searchNo.value = e.stationNo

		let flag = marker.markers.some((item) => {
			item.longitude == e.longitude
			item.latitude == e.latitude
		})
		if (flag) {
			uni.createMapContext('map').moveToLocation({
				longitude: Number(e.longitude),
				latitude: Number(e.latitude)
			})
		} else {
			// 展示点位
			let posArr = [{
				id: e.id,
				longitude: e.longitude,
				latitude: e.latitude,
				iconPath: '../../../static/home/marker.png',
				rotate: 0, // 旋转度数
				width: 40, //宽
				height: 40, //高
				alpha: 1, //透明
				callout: {
					content: e.stationName,
					color: '#000',
					fontSize: 14,
					display: 'ALWAYS',
					padding: 8,
					bgColor: "#fff",
					borderRadius: 5

				}
			}]
			marker.markers.push(...posArr)
			console.log(marker.markers, 'marker');
			uni.createMapContext('map').moveToLocation({
				longitude: Number(e.longitude),
				latitude: Number(e.latitude)
			})
		}


	}
	const goDetail = () => {
		if (searchNo.value) {
			let station = searchNo.value
			uni.navigateTo({
				url: '../stationDetails/stationDetails?station=' + JSON.stringify(station)+'&distance='+JSON.parse(searchDistance.value)
			})
		}

	}
	const callouttap=(e)=>{
		let showInf=pointsList.value.filter((item)=>{
			return item.id==e.markerId
		})
		searchStationName.value = showInf[0].stationName
		searchAreaName.value = showInf[0].areaName
		searchDistance.value = showInf[0].distance
		searchNo.value=showInf[0].stationNo
		console.log(e,'==========e===========',showInf);
		showToast.value=!showToast.value
		
	}
</script>

<style lang="scss">
	.section {
		width: 100%;
		// height: 100vh;
		position: relative;
	}

	.searchIn {
		height: 100rpx;
	}

	.map {
		width: 100%;
		height: calc(100vh - 100rpx);
		// overflow: hidden;
		// overflow-y: auto;
	}

	.goToast {
		width: 100%;
		position: absolute;
		bottom: 1%;
	}

	.card-border {
		border-radius: 8px;
	}

	.titleState {
		padding: 8rpx 16rpx;
		border: 1px solid #4C91FF;
		border-radius: 5px;
		background-color: #4C91FF;
		color: #fff;
	}

	.name {
		font-size: 36rpx;
		padding: 8rpx 16rpx;
	}

	.goDetail {
		border: 1px solid #4C91FF;
		padding: 8rpx 32rpx;
		color: #4C91FF;
		border-radius: 20px;
	}

	.goMap {
		width: 24rpx;
		height: 24rpx;
		color: #4C91FF;
		background: url('/static/home/goMap.svg') no-repeat;
		background-size: 100% 100%;
	}

	.searchDistance {
		color: #4C91FF;
	}

	.scrollView {
		height: calc(100vh - 100rpx);
	}
</style>