百度地图 缩放 0.5 zoomend zoom_changed

设置/获取地图级别官网地址 : https://lbsyun.baidu.com/jsdemo.htm#bSetGetMapZoom

解决方案

javascript 复制代码
 //创建一个地图
let map = new BMapGL.Map("container");
//这里还需定位下位置,这里就不详细说明了,官方文档有示例
//开启鼠标滚轮缩放功能。仅对PC上有效
map.enableScrollWheelZoom(true);
//滚动开始触发事件,可通过map.getZoom() 获取缩放比例
map.addEventListener("zoomstart", function (e) {
    console.log(e.target.zoomLevel.toFixed(2));
});
//滚动动画及 步进入 触发事件 此事件在 zoomend 后 还会触发 ,不建议在此处进行任何操作,该位置仅做测试
map.addEventListener("zoom_changed", function (e) {
    console.log(e.target.zoomLevel.toFixed(2));
});
//滚动结束触发事件,如不想频繁触发,可通过节流函数控制
map.addEventListener("zoomend", function (e) {
    console.log(e.target.zoomLevel.toFixed(2));
});
//滚动动画开始时触发,在zoomstart事件后执行  
map.addEventListener("animation_start", function (e) {
    //加try 的原因 该方法不是zoom 唯一所有
    try {
        //zoom 包含三个参数 current 当前缩放比例 ,target 目标缩放比例  diff 比例差值
        let _zoom = this._animationInfo.zoom;
        //绝对值验证 放大 还是 缩小 
        //0.75 是为了防止 缩放控件 +1 -1 或其他缩放方法影响 
        if (!(Math.abs(_zoom.diff) > 0.75)) {
            // o.5 步进值
            if (_zoom.diff > 0) {
                this._animationInfo.zoom.diff = 0.5;
            } else {
                this._animationInfo.zoom.diff = -0.5;
            }

            this._animationInfo.zoom.current = _zoom.current;
            //改变目标值
            this._animationInfo.zoom.target = _zoom.current + this._animationInfo.zoom.diff;

        }

    } catch (error) {

    }
});

源码分析

javascript 复制代码
//动画触发事件
_startInfiniteZoomAnimation: function(t) {
    var e = this;
    e._ani && e._ani.stop(!!t.goToEnd, {
        stopCurrentAnimation: t.stopCurrentAnimation
    }),
    e._infiniteAni || (this.fire(new aB("onanimation_start")),
        e._infiniteAni = new l({
            duration: 1e4,
            transition: bq.linear,
            render: function() {
                //步进值
                var i = e._animationInfo.zoom;
                return Math.abs(i.current - i.target) < .001 ? (e._setValue("zoom", i.target),
                    void e._infiniteAni.stop()) : (i.current += .35 * (i.target - i.current),
                    e._setValue("zoom", i.current),
                    void (t.renderCallback && t.renderCallback()))
            },
            finish: function() {
                e._infiniteAni = null,
                    e._animationInfo = {},
                    e.fire(new aB("onanimation_end")),
                t.callback && t.callback()
            },
            onStop: function() {
                e._infiniteAni = null,
                    e._animationInfo = {},
                    e.fire(new aB("onanimation_end")),
                t.callback && t.callback()
            }
        }))
}
javascript 复制代码
// zoom_changed 触发事件
_setValue: function (e, T) {
    if (e === "zoom") {
        this._preZoomLevel = this.zoomLevel;
        var i = this._getProperZoom(T);
        T = i.zoom;
        if (T !== this.zoomLevel) {
            this.zoomLevel = T;
            if (T < 5) {
                this.restrictCenter(this.centerPoint)
            }
            this.fire(new fS("on" + e + "_changed"))
        }
        return
    } else {
        if (e === "center") {
            this.centerPoint = T
        }
    }
    this["_" + e] = T;
    this.fire(new fS("on" + e + "_changed"))
}
相关推荐
名字还没想好☜8 分钟前
React 实现暗黑模式切换:localStorage 持久化、SSR 首屏闪烁与跟随系统主题
前端·javascript·react.js·ecmascript·react·next.js
自动化监测Learner1 小时前
主流 Web 端地图引擎对比:选型指南与优劣分析
javascript
LaughingZhu1 小时前
Product Hunt 每日热榜 | 2026-09-05
人工智能·深度学习·神经网络·搜索引擎·百度
宿6745 小时前
vue3-config
前端·javascript·vue.js
ShineWinsu8 小时前
对于 Vue 3:从为什么学 Vue,到声明式渲染与数据响应式的解析
前端·javascript·vue.js
TMT星球9 小时前
夏智天枢平台发布,云从科技分享AI应用服务商实践
人工智能·科技·百度
leoZ2319 小时前
第 6 篇:SchemaForm 渲染器核心实现
前端·javascript·vue.js·人工智能·神经网络·机器学习·自然语言处理
CoderYanger9 小时前
前端基础——JavaScript(基础语法)(下篇)
java·开发语言·前端·javascript·程序人生·面试·职场和发展
还是大剑师兰特10 小时前
vue项目浏览器版本判别,低于IE11跳转到新页面
前端·javascript·vue.js
想吃火锅100510 小时前
【leetcode】42.接雨水js
开发语言·javascript·ecmascript