uniapp App地图点击label

LuWeiFun

于 2024-08-06 18:23:00 发布

阅读量80

点赞数 1

文章标签： uni-app 前端 javascript

本文链接：https://blog.csdn.net/m0_60997870/article/details/140962937

版权

<template>
	<uni-nav-bar backgroundColor="#fff" leftIcon="back" @clickLeft="back" :statusBar="true" title="本月签到轨迹" color="#333"
		:border="false" />
	<view class="map-page">
		<map id="map" class="map" :latitude="mapLatitude" :longitude="mapLongitude" :markers="markers"
			@markertap="markertap" @tap="tapMap"></map>

	</view>

</template>

<script setup>
	import {ref,onMounted,nextTick,} from 'vue';
	import {onUnload } from '@dcloudio/uni-app'
	import * as utils from '@/common/utils/back.js'
	import * as day from '@/common/utils/day.js'
	import hrUserSignInApi from '@/api/erp/hr/hrUserSignInApi.js'
	//存放标记点数组
	const markers = ref([])
	const mapLatitude = ref(null)
	const mapLongitude = ref(null)
	//以往记录
	const markersList = ref([])
	// 弹窗展示
	const isShow = ref(false)

	// 列表
	const recordList = ref([])


	// 设置图标
	const setMarkers = (latitude, longitude, id = 0) => {

		let len = recordList.value[id].locations.length

		let location = {
			id,
			latitude: Number(latitude),
			longitude: Number(longitude),
			iconPath: '../../../static/workbenche/location.png',
			width: 10,
			height: 10,
			label: {
				content: `${len}次`
			}
		}

		markers.value.push(location)
	}


	// 获取记录
	const getMakers = () => {
		let options = {
			dateBegin: day.getFirstAndLastDayOfMonth().firstDayFormatted,
			dateEnd: day.getFirstAndLastDayOfMonth().lastDayFormatted
		}
		hrUserSignInApi.getCurrentUserSignInList(options).then(res => {
			if (res.ret) {
				let objMap = new Map()
				res.data.forEach(item => {
					item.fileDataJson = JSON.parse(item.fileDataJson)
					item.longitude = item.longitude.slice(0, 7)
					item.latitude = item.latitude.slice(0, 7)
					let key = `${item.longitude}-${item.latitude}`;
					if (objMap.has(key)) {
						objMap.get(key).push(item);
					} else {
						objMap.set(key, [item]);
					}
				});

				recordList.value = Array.from(objMap.values()).map((e, index) => {
					return {
						index,
						locations: e
					}
				})

				mapLatitude.value = recordList.value[0].locations[0].latitude
				mapLongitude.value = recordList.value[0].locations[0].longitude
				recordList.value.forEach(e => {
					e.locations.forEach(item => {
						setMarkers(item.latitude, item.longitude, e.index)
					})

				})

			} else {
				utils.showToast(res.message)
			}
		})
	}


	// 点击标记点
	const markertap = (e) => {
		let obj = recordList.value.find(item => item.index === e.detail.markerId)
		const subNVue = uni.getSubNVueById('popup');
		subNVue.show()
		uni.$emit('page-popup', obj.locations)
	}

	// 点击地图
	const tapMap = (e) => {

		let {
			longitude,
			latitude
		} = e.detail
		mapLatitude.value = latitude
		mapLongitude.value = longitude
	}


	onMounted(() => {
		getMakers()
	})

	onUnload(() => {
		uni.$off('page-popup')
	})


	const back = () => {
		uni.navigateBack()

	}
</script>


<style lang="scss" scoped>
	page {
		height: 100%;
	}

	.map-page {
		height: 100%;

		.map {
			width: 750rpx;
			height: 100%;
		}



	}
</style>

弹窗文件:使用nvue

<template>
	<view class="content">


		<scroll-view scroll-y="true" class="scroll" :show-scrollbar="false">
			<view class="content-box">
				<view class="content-title f15">{{list[0]?.address}} | 签到{{list.length}}次</view>
				<view class="content-body" v-for="(item,index) in list" :key="index">
					<view class="date">
						<text class="f14">时间 </text>
						<text class="color-a1a3a5 f14">{{item.gmtCreated.slice(-14)}} </text>
					</view>
					<view class="img-list" v-if="item.imgList && item.imgList.length > 0">
						<text class="f14">照片</text>
						<image class="img" :src="imgs" mode="" v-for="(imgs,imgIndex) in item.imgList" :key="imgIndex"
							@click="showImg(item.imgList,imgIndex)"></image>
					</view>
					<view class="desc" v-if="item.remark">
						<text class="f14">说明 </text>
						<text class="desc-text color-a1a3a5 f14">{{item.remark}}</text>

					</view>
					<view class="liner" v-if="index !== list.length - 1"></view>
				</view>
			</view>
		</scroll-view>
		<view class="closeempty" @click="hidePopup">
			<uni-icons type="closeempty" color="#fff" size="20"></uni-icons>
		</view>
	</view>
</template>

<script>
	import {
		getImgUrl
	} from '@/common/utils/media.js'
	export default {
		onLoad() {
			uni.$on('page-popup', (event) => {
				event.forEach(e => {
					if (e.fileDataJson) {
						if (e.fileDataJson[0] && e.fileDataJson[0].uuids) {
							e.imgList = e.fileDataJson[0].uuids.map(item => {
								return getImgUrl(item);
							});
						} else {
							e.imgList = []
						}
					}
				})

				this.list = event

			})
		},
		data() {
			return {
				list: [],

			}
		},
		methods: {
			hidePopup() {
				const subNVue = uni.getSubNVueById('popup');
				subNVue.hide()
			},
			// 展示图片
			showImg(imgList, index) {
				uni.previewImage({
					urls: imgList,
					current: index
				})
			}

		}
	}
</script>

<style scoped>
	.content {
		position: fixed;
		top: 260%;
		left: 28%;
	}

	.scroll {
		width: 650rpx;
		border-radius: 10rpx;
		background-color: #fff;
		height: 600rpx;
	}

	.content-box {
		font-size: 12px;
		/* #ifndef APP-NVUE */
		box-sizing: border-box;
		/* #endif */
		
		padding: 20rpx;
	}

	.content-title {
		width: 600rpx;
		font-size: 15px;
		/* #ifndef APP-NVUE */
		white-space: normal;
		/* #endif */
		
	}

	.content-tip {
		position: absolute;
		right: 10px;
		bottom: 10px;
		color: #409EFF;
	}

	.date {
		width: 600rpx;
		margin: 10rpx 0;
		flex-direction: row;
		font-size: 30px;
	}

	.img-list {
		width: 600rpx;
		flex-direction: row;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.img-text {
		font-size: 14px !important;
	}

	.img {
		width: 60rpx;
		height: 60rpx;
		border-radius: 10rpx;
		margin-left: 4rpx;
	}

	.liner {
		width: 600rpx;
		height: 1px;
		background-color: #f2F2F2;
		margin: 14rpx 0;
	}

	.desc {
		width: 600rpx;
		flex-direction: row;
		/* #ifndef APP-NVUE */
		white-space: normal;
		/* #endif */
		
	}

	.desc-text {
		width: 600rpx;
		/* #ifndef APP-NVUE */
		white-space: normal;
		/* #endif */
	}

	.closeempty {
		margin-top: 20rpx;
	}

	.color-a1a3a5 {
		color: #a1a3a5;
	}

	.f15 {
		font-size: 15px;
	}

	.f14 {
		font-size: 14px;
	}
</style>

pages.json

{
				"path": "hr/signIn/map/map",
				"style": {
					"navigationStyle": "custom",
					"navigationBarTextStyle": "black",
					"app-plus": {
						"background": "transparent",
						"scrollIndicator": "none",
						"subNVues": [{
							"id": "popup",
							"path": "hr/signIn/map/mapPopup",
							"type": "popup",
							"style": {
								"position": "popup",
								"margin": "auto",
								"width": "100%",
								"height": "100%",
								"background": "transparent"
							}

						}]
					}
				}
			},