百度地图 缩放 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"))
}
相关推荐
小迷糊的学习记录33 分钟前
Vuex 与 pinia
前端·javascript·vue.js
发现一只大呆瓜1 小时前
前端性能优化:图片懒加载的三种手写方案
前端·javascript·面试
不爱吃糖的程序媛1 小时前
Flutter 与 OpenHarmony 通信:Flutter Channel 使用指南
前端·javascript·flutter
利刃大大1 小时前
【Vue】Element-Plus快速入门 && Form && Card && Table && Tree && Dialog && Menu
前端·javascript·vue.js·element-plus
NEXT061 小时前
AI 应用工程化实战:使用 LangChain.js 编排 DeepSeek 复杂工作流
前端·javascript·langchain
光影少年2 小时前
react的hooks防抖和节流是怎样做的
前端·javascript·react.js
小毛驴8502 小时前
Vue 路由示例
前端·javascript·vue.js
发现一只大呆瓜2 小时前
AI流式交互:SSE与WebSocket技术选型
前端·javascript·面试
wuhen_n4 小时前
JavaScript链表与双向链表实现:理解数组与链表的差异
前端·javascript
wuhen_n4 小时前
JavaScript数据结构深度解析:栈、队列与树的实现与应用
前端·javascript