uniapp- map组件监听地图缩放
需求:根据地图缩放比例大小判断展示maker气泡(地图缩小时只显示maker,放大到一定数值时再显示气泡)
官方提到的这个回调只能监听拖拽,并不能监听缩放,这样做的效果就是在指定级别内气泡会拖一下闪烁一下,特难受!!!!
解决办法:使用地图对象定时获取地图的缩放级别,然后再判断是否该显示还是隐藏,并且该方式不能让气泡经常闪烁:
完整代码:
<template>
<view>
<map style="width: 100%;" id="map":style="{height:mapheight}" :show-location='true' :latitude="latitude"
:longitude="longitude" :markers="marker" :joinCluster="true" :scale="scale" @markertap="markertap"
>
</map>
<view class="legend_fixed">
<view class="legend_box">
<view v-for="(item,index) in legendList" :key="index" class="legend_items" @tap="choiceFn(item,index)">
<u-icon :name="item.icon" :color="item.color" size="30"></u-icon>
<view class="right">
<view class="name">{{item.name}}</view>
<view class="flex">
<view class="infos">
站点:<text>{{item.site_number>99?'99+':item.site_number}}</text>
</view>
<view class="infos">
评论:<text>{{item.comment_number>99?'99+':item.comment_number}}</text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
latitude: 29.587311, //纬度
longitude: 106.532555, //经度
scale: 12, //缩放级别
current_legend: 0, //当前分类
legendList: [],
bottomData: false,
marker: [],
mapContext: null // 地图对象
}
},
onLoad() {
this.getLegendList();
},
onReady() {
this.mapContext = uni.createMapContext("map", this);
this.intervalFn();
},
computed: {
mapheight() {
let data = ''
if (this.bottomData) {
if (this.upTop) {
data = '50px'
} else {
data = '200px'
}
} else {
data = '85vh'
}
return data
},
coverbottom() {
let data = ''
if (this.bottomData) {
data = '20rpx'
} else {
data = '100rpx'
}
return data
}
},
methods: {
/* 站点分类 */
getLegendList() {
this.$myRequset({
url: this.$requestApi.get_classify
}).then((res) => {
this.legendList = res.data.data;
this.getSiteList(0);
}).catch((err) => {});
},
/* 站点列表 */
getSiteList(_id) {
uni.showLoading({
title: '站点数据加载中...',
icon: "none"
})
this.$myRequset({
url: this.$requestApi.get_site_list,
data: {
classify_id: _id
},
}).then((res) => {
uni.hideLoading();
let _list = res.data.data;
let _result = [];
_list.map((item) => {
let _obj = {
id: Number(item.id),
latitude: item.latitude, //纬度
longitude: item.longitude, //经度
iconPath: this.legendList[this.current_legend].icon,
name: item.name,
address: item.address,
rotate: 0, // 旋转度数
width: 30, //宽
height: 30, //高
alpha: 0.9, //透明度
title: item.title,
/* callout: {
content: item.title,
color: '#000', //文字颜色
fontSize: 16, //文本大小
borderRadius: 2, //边框圆角
borderWidth: '8',
padding: 10,
bgColor: '#fff', //背景颜色
display: 'ALWAYS', //常显
} */
}
_result.push(_obj);
});
this.marker = _result;
}).catch((err) => {
uni.showToast({
title: err.msg,
icon: "none"
});
});
},
/* 获取地图缩放级别-定时判断 */
intervalFn(){
setInterval(() => {
this.mapContext.getScale({
success:(res) => {
let _result = [];
let _obj = {};
if (this.marker.length > 0) {
let _result = [];
this.marker.map((item) => {
_obj = {
id: Number(item.id),
latitude: item.latitude, //纬度
longitude: item.longitude, //经度
iconPath: this.legendList[this.current_legend].icon,
name: item.name,
address: item.address,
rotate: 0, // 旋转度数
width: 30, //宽
height: 30, //高
alpha: 0.9, //透明度
title: item.title,
}
if (res.scale >= 14.5) { // 放大地图显示气泡,缩小地图不显示
_obj.callout = {
content: item.name,
color: '#000', //文字颜色
fontSize: 16, //文本大小
borderRadius: 2, //边框圆角
borderWidth: '8',
padding: 10,
bgColor: '#fff', //背景颜色
display: 'ALWAYS', //常显
}
}
_result.push(_obj);
});
this.marker = _result;
}
}
})
}, 500)
},
choiceFn(_item, _index) {
this.current_legend = _index;
if (_index == 0) {
this.getSiteList(0);
} else {
this.getSiteList(this.legendList[this.current_legend].id);
}
},
//地图点击事件
markertap(e) {
uni.navigateTo({
url: '../../pageA/listDetail/listDetail?site_id=' + e.markerId
});
},
}
}
</script>
<style>
@import url("index.css");
</style>
总结:官方稍微有点坑了,只能监听拖拽开始和结束,跟正常的交互不太统一,好在还能通过获取地图对象这条路来走,但是说实话轮循是下下策,如果有伙伴能有更好的解决方案欢迎交流额。
本文来自博客园,作者:小虾米吖~,转载请注明原文链接:https://www.cnblogs.com/LindaBlog/p/16784086.html
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」