suta/pagesFengChang/components/map.vue

<template>
	<view class="content">

		<!-- 地图 -->
		<map class="map" id="map" ref="map" @tap="chooseLocation" style="width: 100%; height: 100vh;" :scale="zoomSize"
			:latitude="latitude" :longitude="longitude" :markers="markers" :enable-satellite="isMap" show-location>
		</map>
		<view v-if="!isShowInfo"
			style="width:80%;position:absolute;bottom:10%;left:10%;background-color:white;border-radius:7rpx;padding:15rpx;">
			<view>{{latitude}}，{{longitude}}</view>
			<u-button @click="submitMark">确定</u-button>
		</view>

		<view v-if="isShowInfo" style="position: absolute;top: 0;width: 100%;background-color: #F7F7F7;">
			<view class="maptaxtbox">
				<view class="mt-taxtbox">{{info.name}}</view>
				<view class="mt-taxtbox-2">
					<img src="../../static/蜂场地图-定位标.png" class="img-wh">
					<view class="">
						{{info.address}}
					</view>
				</view>
				<view class="mt-taxtbox-3">
					<view class="lietext">
						<img src="../../static/蜂场地图-在线.png" class="img-wh-2">
						<view>在线: {{infos.online_beehive}}</view>
					</view>
					<view class="suncolor">|</view>
					<view class="lietext">
						<img src="../../static/蜂场地图-离线.png" class="img-wh-2">
						<view>离线: {{infos.offline_beehive}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '@/utils/request.js'
	export default {
		data() {
			return {
				latitude: '',
				longitude: '',
				markers: [],
				isMap: false,
				zoomSize: 15,
				markers: [


				],
				info: {},
				infos: {},
				isShowInfo: false,
				id: 0,
				listData:[]
			}
		},
		onShow() {

			// this.getLocation()
		},
		onLoad(option) {
			console.log(option);
			if (option.info) {
				this.info = JSON.parse(option.info)
				console.log(this.info.id);
				this.id = this.info.id
				this.isShowInfo = true
				this.getinfo()
				this.pageData('', this.id,'' )
			} else {
				this.getLocation()
			}
		},
		methods: {
                async pageData(page, apiary_id, qrcode) {
                	await request.get('/api/beehive/index', {
                		params: {
                			page,
                			apiary_id,
                			qrcode
                		}
                	}).then(res => {
                		this.listData = JSON.parse(JSON.stringify(res.data.data))
						console.log(this.listData);
						this.mapdian()
                	}).catch(e => {})
                }, 
				mapdian() {
					this.listData.forEach(item => {
						if (item.status_text == '在线') {
							this.markers.push({
								latitude: item.lat,
								longitude: item.lng,
								width: 15,
								height: 15,
								id: item.id,
								iconPath: '../../static/a11.png',
								label: {
									content: item.name,
								}
							})
						}else{
							this.markers.push({
								latitude: item.lat,
								longitude: item.lng,
								width: 15,
								height: 15,
								id: item.id,
								iconPath: '../../static/a22.png',
								label: {
									content: item.name,
								}
							})
						}
					})
				},
	
			getinfo() {

				request.get('/api/apiary/detail/' + this.id, ).then(res => {
					this.infos = res.data.data
					// this.items = [...res.data.data]
					// console.log(this.items)
					// this.showloading=false
					this.latitude = this.info.lat
					this.longitude = this.info.lng;
					let latitude = this.info.lat;
					let longitude = this.info.lng;
					this.markers.push({
						latitude,
						longitude,
						width: 20,
						height: 30,
						id: 0,
						iconPath: '../../static/蜂场.png ', 
						customCallout: {
							anchorY: -5,
							anchorX: 5,
							display: 'BYCLICK'
						}
					})
				})
			},
			chooseLocation(e) {
				console.log(e)
				// 点击地图时触发，可以在这里获取经纬度
				this.longitude = e.detail.longitude
				this.latitude = e.detail.latitude
				console.log('选点经度：', this.longitude)
				console.log('选点纬度：', this.latitude)
				this.markers[0].latitude = this.latitude
				this.markers[0].longitude = this.longitude
				this.$forceUpdate()

				//   this.markers.push({
				//     latitude:this.latitude,
				//     longitude: this.longitude,
				//     width: 20,
				//     height: 30,
				//     id: 0,
				//     customCallout: {
				//         anchorY: -5, 
				//         anchorX: 5, 
				//         display: 'BYCLICK'
				//     }
				//   })
				console.log(this.markers)
			},
			async getLocation() {

				// console.log('1111')
				const {
					latitude,
					longitude
				} = await uni.getLocation()
				console.log(latitude, longitude)
				this.latitude = latitude
				this.longitude = longitude,
					this.markers.push({
						latitude,
						longitude,
						width: 20,
						height: 30,
						id: 0,
						customCallout: {
							anchorY: -5,
							anchorX: 5,
							display: 'BYCLICK'
						}
					})
			},
			submitMark() {
				uni.$emit('newPages', {
					id: '1', //这个页面的id
					value: this.markers[0]
				})
				uni.navigateBack({});
			}
		},

	}
</script>

<style lang="scss" scoped>
	.suncolor {
		color: #818586;
		font-size: 30rpx;
	}

	.lietext {
		display: flex;
		font-size: 32rpx;
	}

	.img-wh {
		width: 28rpx;
		height: 28rpx;
		margin-right: 15rpx;
	}

	.img-wh-2 {
		width: 32rpx;
		height: 32rpx;
		margin-right: 15rpx;
	}

	.mt-taxtbox {
		color: #000;
		font-size: 34rpx;
		margin-top: 20rpx;
	}

	.mt-taxtbox-2 {
		font-size: 24rpx;
		color: #818586;
		display: flex;
		margin-top: 20rpx;
	}

	.mt-taxtbox-3 {
		margin-top: 20rpx;
		display: flex;
		justify-content: space-around;
	}

	.maptaxtbox {
		padding: 10rpx 20rpx 20rpx;
	}

	.content {
		height: 100vh;
		width: 100%;
	}
</style>