suta/pages/ditu/index.vue

<template>
	<view class="content">
		<!-- <image src="../../static/a11.png" mode=""></image> -->
		<!-- 地图 -->
		<map class="map" id="map" ref="map" style="width: 100%; height: 100%;" :scale="zoomSize" :latitude="latitude"
			:longitude="longitude" :markers="markers" :enable-satellite="isMap" show-location>
		</map>
		<view class="rightTool">
			<view @click="fengchang" class="right_tool_item">蜂场：<text style="color: #23693F;">{{fengchangNumber}}</text>
			</view>
			<view @click="fengxiang" class="right_tool_item">蜂箱：<text style="color: #23693F;">{{fengxiangNumber}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '../../utils/request'
	export default {
		name: "feature",
		data() {
			return {
				fengchangNumber: 0,
				fengxiangNumber: 0,
				listData: [],
				latitude: '',
				longitude: '',
				isMap: false,
				zoomSize: 15,
				fclist: [],
				markers: [
					{
					  // latitude:27.105794,
					  // longitude:120.256882,
					  // width: 20,
					  // height: 30,
					  // id: 0,
					  // iconPath: '../../static/aa1.png',
					}
				],
			}
		},
		onShow() {
			this.markers = []
			this.getLocation()
			this.listDataFn()
			this.getfengchangList()
		},
		methods: {
			getfengchangList() {
				request.get('/api/beehive/index', {}).then(res => {
					this.fengxiangNumber = res.data.data.length

				})
				request.get('/api/apiary/index', {}).then(res => {
					this.fengchangNumber = res.data.data.length
					this.fclist = res.data.data
					this.fclist.forEach(item => {
						this.markers.push({
							latitude: item.lat,
							longitude: item.lng,
							width: 25,
							height: 25,
							id: parseFloat(item.id),
							iconPath: '../../static/蜂场.png',
							label: {  
								content: item.name,
								fontSize:15,
								 anchorX: (() => {
								 	if (item.name.length < 2) {
								 		return -6
								 	}else if(item.name.length <= 2){
								 		return -13
								 	} else if (item.name.length <= 3) {
								 		return -20
								 	} else if (item.name.length <= 4) {
								 		return -30
								 	} else if (item.name.length <= 5) {
								 		return -35
								 	} else if (item.name.length <= 6) {
								 		return -40
								 	} else if (item.name.length <= 8) {
								 		return -50
								 	} else if (item.name.length <=
								 		10) {
								 		return -60
								 	} else {
								 		return -item.name.length * 6.5
								 	}
								 })(),
							},
						})
					})
				})
			},
			async listDataFn() {
				await request.get('/api/beehive/index2map').then(res => {
					// console.log(res.data.data)
					this.listData = [...res.data.data]
					this.mapdian()
				})
			},
			mapdian() {
				this.listData.forEach(item => {
					if (item.status_text == '在线') {
						this.markers.push({
							latitude: item.lat,
							longitude: item.lng,
							width: 15,
							height: 15,
							id: parseFloat(item.id),
							iconPath: '../../static/a11.png',
							label: {
								content: item.name,
								anchorX: (() => {
									if (item.name.length < 2) {
										return -6
									}else if(item.name.length <= 2){
										return -12
									} else if (item.name.length <= 3) {
										return -20
									} else if (item.name.length <= 4) {
										return -25
									} else if (item.name.length <= 5) {
										return -30
									} else if (item.name.length <= 6) {
										return -35
									} else if (item.name.length <= 8) {
										return -40
									} else if (item.name.length <=
										10) {
										return -45
									} else {
										return -item.name.length * 5
									}
								})(),
							}
						})
					} else {
						this.markers.push({
							latitude: item.lat,
							longitude: item.lng,
							width: 15,
							height: 15,
							id: parseFloat(item.id),
							iconPath: '../../static/a22.png',
							label: {
								content: item.name,
								 anchorX: (() => {
								 	if (item.name.length < 2) {
										return -6
								 	}else if(item.name.length <= 2){
										return -12
									} else if (item.name.length <= 3) {
								 		return -20
								 	} else if (item.name.length <= 4) {
								 		return -25
								 	} else if (item.name.length <= 5) {
								 		return -30
								 	} else if (item.name.length <= 6) {
								 		return -35
								 	} else if (item.name.length <= 8) {
								 		return -40
								 	} else if (item.name.length <=
								 		10) {
								 		return -45
								 	} else {
								 		return -item.name.length * 5
								 	}
								 })(),
							}
						})
					}


				})
			},
			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: 1,
						height: 1,
						id: parseFloat(0),
						iconPath:'',
						customCallout: {
							// anchorY: -5,
							anchorX:-5,
							display: 'BYCLICK'
						}
					})
			},
			fengchang() { // 跳转蜂场
				wx.switchTab({
					url: '/pages/fengchang/index'
				})
			},
			fengxiang() { // 跳转蜂箱
				wx.switchTab({
					url: '/pages/fengxiang/index'
				})
			}
		}
		// methods: {
		//     toggle(){
		//         this.isMap=!this.isMap
		//     },
		//     blowup(){
		//        if(this.zoomSize >= 20) return
		//        this.zoomSize++
		//     },
		//     minification(){
		//        if(this.zoomSize <= 3) return
		//        this.zoomSize--
		//     },
		//     back(){
		//         this.map = uni.createMapContext("map", this);  
		//         this.map.moveToLocation() 
		//     },
		//     mapTap({detail: {latitude,longitude}}){
		//         if(this.flag){
		//             this.option = {
		//                 id: ++this.id,
		//                 latitude: latitude,
		//                 longitude: longitude,
		//                 width: 20,
		//                 height: 30
		//             }
		//             let arr=[]
		//             this.markers.push(this.option)
		//             for (let index = 1; index < this.markers.length; index++) {
		//                 arr.push({
		//                     latitude:this.markers[index].latitude,
		//                     longitude: this.markers[index].longitude
		//                 })
		//             }
		//             this.option=arr;  
		//         }

		//     },
		//     measuredArea(){
		//       this.flag=!this.flag 
		//     },
		//     wayAll(){
		//         if (this.option.length > 2) {
		//             console.log(this.option);
		//     this.polygons[0].points=[];
		//     this.polygons[0].points.push(...this.option)
		//             this.markers[1]["callout"]={
		// 					content: "4917.9平方公里",
		// 					display: "ALWAYS",
		// 					padding: 6,
		// 					borderRadius: 5,
		// 					borderWidth: 1,
		// 					borderColor: "#3D8DFE",
		//                             anchorX:30,
		//                             anchorY:10
		// 				}
		//     console.log(this.polygons,'得到的数值');
		// }else{
		// 	uni.showToast({
		// 		title:"起码选择三个点",
		// 		duration: 2000
		// 	})
		// }
		//     },
		//     closeWayall(){
		//         this.polygons[0].points=[{
		// 		latitude: 28.68194 ,
		// 		longitude:115.96191
		// 	}, {
		// 		latitude: 28.68195 ,
		// 		longitude:115.96192
		// 	}, {
		// 		latitude: 28.68196 ,
		// 		longitude:115.96193
		// 	}]
		//     },
		//     deleteAnchor(){
		//         if(this.markers.length !== 1){
		//             this.markers.pop()
		//             let arr=[]
		//             for (let index = 1; index < this.markers.length; index++) {
		//                 arr.push({
		//                     latitude:this.markers[index].latitude,
		//                     longitude: this.markers[index].longitude
		//                 })
		//             }
		//             this.option=arr;    
		//             this.closeWayall() 
		//             if(this.option.length > 2){
		//                 this.wayAll()
		//             }

		//         }
		//     }
		// },
	}
</script>

<style lang="scss" scoped>
	.content {
		height: 100%;
		width: 100%;
		position: absolute;
		overflow: hidden;

		.rightTool {
			position: absolute;
			right: 30rpx;
			top: 30rpx;

			.right_tool_item {
				background-color: rgba(214, 215, 219, 0.5);
				padding: 10rpx 20rpx;
				margin-top: 10rpx;
				border-radius: 30rpx;
			}
		}

		.sidebar {
			position: absolute;
			top: 15%;
			right: 20rpx;
		}

		// .toggle,.measure,.zoom{}

		.measure {
			margin-top: 15rpx;
		}

		.stakeMark {
			margin-top: 15rpx;
		}

		.stakeMark {
			width: 80rpx;
			height: 75rpx;
			line-height: 75rpx;
			font-size: 25rpx;
			text-align: center;
			background-color: white;
			color: #146bee;
			border-radius: 7rpx;
			font-weight: 700;
		}

		.zoom {
			margin-top: 50rpx;
			border-radius: 7rpx;
		}

		.orientation {
			width: 80rpx;
			height: 75rpx;
			line-height: 75rpx;
			font-size: 25rpx;
			background-color: white;
			text-align: center;
			border-radius: 7rpx;
			margin-top: 20rpx;
		}

		.callout-content {
			position: absolute;
			background-color: #fff;
			padding: 15rpx;
			font-size: 16rpx;
			border-radius: 7%;

			cover-view {
				margin: 15rpx;

			}
		}

		.generationRegion {
			width: 80%;
			position: absolute;
			bottom: 10%;
			left: 10%;
		}

	}
</style>