dianxiaorui-uniapp/pages/index/index.vue

<template>
	<view class="content">
		<!-- <search :Fixed="true" /> -->
		<map
			id="map"
			:longitude="longitude"
			@markertap="markerClick"
			@callouttap="markerClick"
			@regionchange="regionchange"
			height="90"
			width="90"
			:markers="markList"
			:latitude="latitude"
			class="map_content"
		>
			<cover-view slot="callout">
				<template v-for="(item, index) in markList">
					<cover-view class="callout" :marker-id="item.id">
						<cover-view class="callout_item">
							<cover-image class="callout_item_img" src="/static/icon/mc.png"></cover-image>
							<cover-view class="callout_item_view">闲 {{ item.gunUseCount || 0 }}/{{ item.gunCount || 0 }}</cover-view>
						</cover-view>
					</cover-view>
				</template>
			</cover-view>
		</map>

		<uni-transition ref="mapLocationRef" :show="true">
			<view class="map-location" @click="mapLocation">
				<image src="/static/icon/location-marker-icon.png" mode="widthFix"></image>
			</view>
		</uni-transition>

		<uni-transition modeClass="fade" :show="mapBox">
			<view class="map_box">
				<orderList toNav :Image="true" :info="infoDz" :list="infoDz.pictures" />
			</view>
		</uni-transition>
		<cc-myTabbar :tabBarShow="1"></cc-myTabbar>
		<!-- <tabbar path="/pages/index/index"></tabbar> -->
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { aroundAreaMap, infoAroundApi } from '@/api/api.js';

let longitude = ref(113.675688);
let latitude = ref(34.75527700365562);
let mapContext = ref(null);
let mapBox = ref(false);
let mapLocationRef = ref();

let infoDz = ref([]);

let markList = ref([]);

onLoad(async () => {
	// #ifndef MP-WEIXIN
	uni.hideTabBar();
	// #endif
	mapContext.value = uni.createMapContext('map');
	const { longitude: lon, latitude: lat } = await uni.getLocation({
		type: 'gcj02' // 根据实际需要选择坐标系
	});
	latitude.value = lat;
	longitude.value = lon;
	getInfo();
	setTimeout(() => {
		mapLocation();
	}, 300);
});

let getInfo = async () => {
	let _res = await aroundAreaMap({
		orderByType: 1,
		lat: latitude.value,
		lon: longitude.value
	});

	let list = _res.map((item, index) => {
		return {
			id: item.id,
			longitude: item.location.lng,
			latitude: item.location.lat,
			iconPath: '/static/icon/marker-pointer.png',
			width: 20,
			height: 23,
			content: '2',
			gunUseCount: item.gunUseCount,
			gunCount: item.gunCount,
			distance: item.distance,
			customCallout: {
				display: 'ALWAYS', // 显示方式
				anchorX: 0, // 锚点X轴
				anchorY: -10 // 锚点Y轴
			}
		};
	});
	list.unshift({
		longitude: longitude.value,
		latitude: latitude.value,
		iconPath: '/static/icon/my-location-default.png',
		width: 45,
		height: 45,
		id: -1
	});
	markList.value = list;
};

const mapLocation = () => {
	const log = longitude.value;
	const lat = latitude.value;
	mapContext.value.moveToLocation({
		longitude: log,
		latitude: lat
	});
};

// 地图缩放移动触发
const regionchange = (e) => {
	// 地图移动手松开结束触发type:end
	if (e.type == 'end') {
		console.log(e);
		console.log(e.detail.scale);
		mapBox.value = false;
		mapLocationRefStep(false);
	}
};

// marker点击事件
const markerClick = async (e) => {
	console.log(e, 'eeeeeee');

	if (e.markerId == -1) {
		return;
	}
	uni.showLoading();
	let _res = await infoAroundApi({
		id: e.markerId
	});

	let markerInfo = markList.value.find((val) => val.id == e.markerId);
	let data = _res?.priceList?.find((val) => val.isCurrent == 1);

	infoDz.value = {
		..._res,
		distance: markerInfo.distance,
		priceAmount: data.totalAmount
	};

	console.log(infoDz, 'infoDzinfoDz');
	// infoDz.value.priceAmount = data.totalAmount;
	// infoDz.value.distance = data.distance;
	uni.hideLoading();
	mapBox.value = true;
	mapLocationRefStep(true);
};

const mapLocationRefStep = (type) => {
	if (type) {
		mapLocationRef.value.step(
			{
				translateY: '-200rpx'
			},
			{
				timingFunction: 'ease-in',
				duration: 100
			}
		);
	} else {
		mapLocationRef.value.step(
			{
				translateY: '0rpx'
			},
			{
				timingFunction: 'ease',
				duration: 500
			}
		);
	}
	mapLocationRef.value.run();
};
</script>

<style lang="scss">
.map_content {
	width: 750rpx;
	height: 100vh;
	/* #ifdef MP-ALIPAY */
	height: calc(100vh - 100upx);
	/* #endif */
}

.map-location {
	width: 90rpx;
	height: 90rpx;
	background-color: #fff;
	position: fixed;
	left: 30rpx;
	bottom: 570rpx;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 5px 11px rgba(0, 0, 0, 0.2);

	image {
		width: 45rpx;
		height: 45rpx;
	}
}

.callout {
	box-sizing: border-box;
	background: rgba(15, 75, 203, 0.26);
	border-radius: 15rpx 15rpx 15rpx 0;
	padding: 10rpx 15rpx;
	@include flex($direction: column);
	&_item {
		@include flex;
		font-weight: bold;
		font-size: 28rpx;
		color: #ffffff;
		box-sizing: border-box;
		&_img {
			width: 40rpx;
			height: 40rpx;
			margin-right: 15rpx;
		}
	}
	&_item:nth-child(1) {
		margin-bottom: 15rpx;
	}
}

.recharge {
	width: 690rpx;
	background-color: #fff;
	min-height: 300rpx;
	position: fixed;
	left: 30rpx;
	bottom: 250rpx;
	border-radius: 20rpx;
	padding: 20rpx;
	box-shadow: 0 5px 11px rgba(0, 0, 0, 0.2);

	&_title {
		font-size: 36rpx;
		margin-bottom: 20rpx;
	}

	&_con {
		font-size: 26rpx;
	}
}

.map_box {
	width: 690rpx;
	position: fixed;
	left: 30rpx;
	bottom: 230rpx;
	z-index: 999;
}
</style>