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>

总结：官方稍微有点坑了，只能监听拖拽开始和结束，跟正常的交互不太统一，好在还能通过获取地图对象这条路来走，但是说实话轮循是下下策，如果有伙伴能有更好的解决方案欢迎交流额。