<template>
<view class="page">
<u-navbar is-back="false" :title="title" :border-bottom="false" :background="bgc" title-color='#000'
title-size='36' :title-bold='true' height='45' id="navbar">
</u-navbar>
<map class="map" id="map" ref="map" :scale="zoomSize" :latitude="latitude" :longitude="longitude"
:show-location='true' :markers="covers" @markertap="handleMarkerClick"></map>
<view class="fxtongji">
<view class="one">
<image src="https://api.ccttiot.com/smartmeter/img/static/uB2k1NNeN2QUuSZIAf5r" mode=""></image>
<text class="wz">蜂场</text>
<text class="shu">{{listmap.length}}</text>
</view>
<view class="two">
<image src="https://api.ccttiot.com/smartmeter/img/static/ukbyhyrDcp3VzgyeJo2G" mode=""></image>
<text class="wz">蜂箱</text>
<text class="shu">{{listmaps.length}}</text>
</view>
</view>
<tab-bar :indexs='3' style=""></tab-bar>
<!-- <span style="">福鼎蜂场</span> -->
</view>
</template>
<script>
export default {
data() {
return {
bgc: {
backgroundColor: " #F4FAF8",
},
title: "地图",
latitude: '',
longitude: '',
isMap: false,
zoomSize: 15,
markers: [],
jinweidu:'',
covers: [],
mapContext: null,
mapScaleInterval: null,
listmap:[],
listmaps:[]
}
},
onLoad() {
},
onShow() {
this.getMyLocation()
this.getMyLocations()
},
onReady() {
this.mapContext = uni.createMapContext('map', this)
this.mapScaleInterval = setInterval(this.updateMarkers, 1000)
},
beforeDestroy() {
if (this.mapScaleInterval) {
clearInterval(this.mapScaleInterval)
this.mapScaleInterval = null
}
},
methods: {
// 点击地图图标
handleMarkerClick(e) {
console.log(e.markerId);
},
getMyLocations() {
uni.getLocation({
type: 'wgs84',
success: (res) => {
this.jinweidu = res.longitude + ',' + res.latitude
this.latitude = Number(res.latitude.toFixed(5)) - 0.004
this.longitude = Number(res.longitude.toFixed(5)) + 0.004
// this.setMapScale()
this.$u.get("/farm/beehive/listNearBy?center=" + this.jinweidu + '&radius=' + 1000).then(
res => {
if (res.code == 200) {
this.listmaps = res.data
res.data.forEach(item => {
this.covers.push({
id: parseFloat(item.beehiveId),
latitude: item.lat,
longitude: item.lng,
width: 25,
height: 30,
iconPath: 'https://api.ccttiot.com/smartmeter/img/static/ukbyhyrDcp3VzgyeJo2G',
label: {
content: item.name,
anchorX: (() => {
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
}
})(),
fontWeight: 700,
color: '#FFCC25',
textShadow: '2px 2px 0px white, -2px -2px 0px white, 2px -2px 0px white, -2px 2px 0px white',
borderColor:'#fff',
borderRadius:5,
}
})
// this.covers.push(shopCover)
});
}
})
},
fail: (err) => {
console.error('获取位置失败：', err)
}
});
},
getMyLocation() {
uni.getLocation({
type: 'wgs84',
success: (res) => {
this.jinweidu = res.longitude + ',' + res.latitude
this.latitude = Number(res.latitude.toFixed(5)) - 0.004
this.longitude = Number(res.longitude.toFixed(5)) + 0.004
this.$u.get("/farm/apiary/listNearBy?center=" + this.jinweidu + '&radius=' + 1000).then(
res => {
if (res.code == 200) {
this.listmap = res.data
res.data.forEach(item => {
this.covers.push({
id: parseFloat(item.apiaryId),
latitude: item.lat,
longitude: item.lng,
width: 25,
height: 30,
iconPath: 'https://api.ccttiot.com/smartmeter/img/static/uYrX2QTRLdVVDTB3E5cp',
label: {
content: item.name,
anchorX: (() => {
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
}
})(),
fontWeight: 700,
color: '#FFCC25',
textShadow: '2px 2px 0px white, -2px -2px 0px white, 2px -2px 0px white, -2px 2px 0px white',
borderColor:'#fff',
borderRadius:5,
}
})
})
}
})
},
fail: (err) => {
console.error('获取位置失败：', err)
}
});
},
// 缩放显示隐藏
updateMarkers() {
this.mapContext.getScale({
success: (res) => {
this.covers = []
if (res.scale <= 14) {
this.addMarkersWithoutLabels()
} else {
this.addMarkersWithLabels()
}
},
fail: (error) => {
// console.error('获取地图缩放级别失败：', error);
},
});
},
addMarkersWithoutLabels() {
this.listmap.forEach((item) => {
this.covers.push({
id: parseFloat(item.storeId),
latitude: item.lat,
longitude: item.lng,
width: 25,
height: 30,
iconPath: 'https://api.ccttiot.com/smartmeter/img/static/uYrX2QTRLdVVDTB3E5cp',
borderColor:'#fff',
borderRadius:5,
// bgColor: 'rgba(255, 255, 255, 0.7)'
})
// this.covers.push(shopCover)
});
this.listmaps.forEach((item) => {
this.covers.push({
id: parseFloat(item.storeId),
latitude: item.lat,
longitude: item.lng,
width: 25,
height: 30,
iconPath: 'https://api.ccttiot.com/smartmeter/img/static/ukbyhyrDcp3VzgyeJo2G',
borderColor:'#fff',
borderRadius:5,
// bgColor: 'rgba(255, 255, 255, 0.7)'
})
// this.covers.push(shopCover)
});
},
addMarkersWithLabels() {
this.listmap.forEach((item) => {
this.covers.push({
id: parseFloat(item.storeId),
latitude: item.lat,
longitude: item.lng,
width: 25,
height: 30,
iconPath: 'https://api.ccttiot.com/smartmeter/img/static/uYrX2QTRLdVVDTB3E5cp',
label: {
content: item.name,
anchorX: this.calculateAnchorX(item.name),
fontWeight: 700,
color: '#FFCC25',
textShadow: '2px 2px 0px #000, -2px -2px 0px #000, 2px -2px 0px #000, -2px 2px 0px #000',
rotate: 20,
borderColor:'#fff',
borderRadius:5,
// bgColor: 'rgba(255, 255, 255, 0.7)'
}
})
// this.covers.push(shopCover)
});
this.listmaps.forEach((item) => {
this.covers.push({
id: parseFloat(item.storeId),
latitude: item.lat,
longitude: item.lng,
width: 25,
height: 30,
iconPath: 'https://api.ccttiot.com/smartmeter/img/static/ukbyhyrDcp3VzgyeJo2G',
label: {
content: item.name,
anchorX: this.calculateAnchorX(item.name),
fontWeight: 700,
color: '#FFCC25',
textShadow: '2px 2px 0px #000, -2px -2px 0px #000, 2px -2px 0px #000, -2px 2px 0px #000',
rotate: 20,
borderColor:'#fff',
borderRadius:5,
// bgColor: 'rgba(255, 255, 255, 0.7)'
}
})
// this.covers.push(shopCover)
});
},
calculateAnchorX(name) {
let chineseLength = 0;
let englishLength = 0;
for (let i = 0; i < name.length; i++) {
const charCode = name.charCodeAt(i);
if (charCode >= 0x4e00 && charCode <= 0x9fa5) {
chineseLength++;
} else if (/[a-zA-Z]/.test(name[i])) {
englishLength = englishLength + 0.3
}
}
const totalLength = chineseLength + englishLength * 2
return -totalLength * 7
},
}
}
</script>
<style lang="scss">
page {
background-color: #FAFDFD;
}
.page {
// position: relative;
width: 750rpx;
.fxtongji{
position: fixed;
top: 15vh;
right: 50rpx;
z-index: 99;
.one{
display: flex;
align-items: center;
background-color: rgba(191, 191, 191, 0.4);
padding: 4rpx 20rpx;
box-sizing: border-box;
border-radius: 30rpx;
.wz{
color: #3D3D3D;
font-size: 32rpx;
margin: 0 15rpx;
font-weight: 600;
}
.shu{
color: #FFC107;
font-size: 32rpx;
}
image{
width: 44rpx;
height: 44rpx;
}
}
.two{
display: flex;
align-items: center;
margin-top: 20rpx;
background-color: rgba(191, 191, 191, 0.4);
padding: 4rpx 20rpx;
box-sizing: border-box;
border-radius: 30rpx;
.wz{
color: #3D3D3D;
font-size: 32rpx;
margin: 0 15rpx;
font-weight: 600;
}
.shu{
color: #FFC107;
font-size: 32rpx;
}
image{
width: 44rpx;
height: 44rpx;
}
}
}
.map {
width: 750rpx;
height: 100vh;
}
}
</style>