当前位置：首页 > news >正文

uniapp App地图点击label

news 来源：原创 2024/9/20 7:23:18

<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.lengthlet 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].latitudemapLongitude.value = recordList.value[0].locations[0].longituderecordList.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.detailmapLatitude.value = latitudemapLongitude.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"}}]}}},