需求：根据地图缩放比例大小判断展示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 // 地图对象
}
},
onl oad() {
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>
总结：官方稍微有点坑了，只能监听拖拽开始和结束，跟正常的交互不太统一，好在还能通过获取地图对象这条路来走，但是说实话轮循是下下策，如果有伙伴能有更好的解决方案欢迎交流额。
标签：uniapp,map,缩放,item,let,result,data,id From： https://www.cnblogs.com/LindaBlog/p/16784086.html