百度地图 缩放 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"))
}
相关推荐
steven~~~9 分钟前
为什么mq报错
javascript
threelab1 小时前
Three.js 初中数学函数可视化 | 三维可视化 / AI 提示词
开发语言·前端·javascript·人工智能·3d·着色器
凉辰2 小时前
解决 H5 键盘遮挡与页面上推
开发语言·javascript·计算机外设
zz5884 小时前
面试官问"JS的类型"时,到底想听到什么?
javascript
gjwjuejin4 小时前
全埋点技术方案深度剖析:从事件代理到无痕采集的完整实现
javascript
前端若水5 小时前
在 Vue 2 与 Vue 3 中使用 markdown-it-vue 渲染 Markdown 和数学公式
前端·javascript·vue.js
之歆5 小时前
DAY_10 JavaScript 深度解析:原型链 · 引用类型 · 内置对象 · 数组方法全攻略(下)
开发语言·前端·javascript·ecmascript
__log5 小时前
ComfyUI 集成技术方案分析报告
javascript·python·django
ZC跨境爬虫6 小时前
跟着 MDN 学 HTML day_56:(HTML 表格基础完全指南)
前端·javascript·ui·html·音视频
江晓曼*凡云基地6 小时前
Hermes Agent 多Agent模式:并行拆解复杂任务的实战指南
javascript·windows·microsoft