clsd/app/pages/job/map.vue

<template>
	<view>
		<view class="search">
			<view class="bbc">
				<u-search placeholder="搜索工作" :disabled="true" bgColor="white" :showAction="false" @click="go('/pages/job/search')"></u-search>
			</view>
		</view>
		<map :latitude="param.latitude" scale="10.3" show-location :longitude="param.longitude" :markers="markers" @markertap="click"></map>
		<view class="footer">
			<view class="bbc" v-if="item.id">
				<view class="item_job" @click="go('/pages/job/detail?id=' + item.id)">
					<view class="top">
						<view class="title omit">{{ item.title }}</view>
						<view class="salary">{{ item.salary }}</view>
					</view>
					<view class="bot">
						<view class="address omit">
							<text>{{ item.regionName }}</text>
							<text class="icon">&#xe757;</text>
							<text>{{ item.location }}</text>
						</view>
						<view class="distance" v-if="item.distance">距离你{{ item.distance }}km</view>
					</view>
				</view>
			</view>
			<view class="bbc" v-else>
				<view class="item_job">
					<view class="address omit">
						<text>地图共有：{{ list.length }}个全职岗位</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			a1: 'https://chenglantimes.com/prod-api/profile/upload/2024/06/15/a1.png',
			a2: 'https://chenglantimes.com/prod-api/profile/upload/2024/06/15/a2.png',
			item: {},
			list: [],
			param: { orderBy: 'id', type: 0 },
			markers: []
		};
	},
	onLoad(e) {
		if (this.getLocation()) {
			this.param.latitude = this.getLocation().latitude;
			this.param.longitude = this.getLocation().longitude;
		}
		this.getData();
	},
	methods: {
		getData() {
			this.http.request({
				url: '/app/position/map',
				data: this.param,
				success: (res) => {
					this.list = res.data.data;
					this.list.forEach((item, index) => {
						this.markers.push({
							id: index,
							width: 40,
							height: 40,
							latitude: item.latitude,
							longitude: item.longitude,
							iconPath: this.a1
						});
					});
				}
			});
		},
		click(e) {
			this.item = this.list[e.markerId];
			let marker = this.markers.filter((item) => item.id == e.markerId)[0];
			this.markers.forEach((item) => (item.iconPath = this.a1));
			marker.iconPath = this.a2;
		},
		go(url) {
			uni.navigateTo({ url: url });
		}
	}
};
</script>

<style lang="scss">
.search {
	position: fixed;
	width: 100%;
	top: 0px;
	z-index: 11;
}
map {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0px;
	z-index: 1;
}
.bbc {
	padding: 15px;
	.item_job {
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
	}
}
.footer {
	position: fixed;
	width: 100%;
	bottom: 20px;
	z-index: 11;
}
</style>