百度地图 缩放 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"))
}
相关推荐
艾小码32 分钟前
前端人必看!3个技巧让你彻底搞懂JS条件判断与循环
前端·javascript
灵感__idea8 小时前
Hello 算法:让前端人真正理解算法
前端·javascript·算法
excel9 小时前
🧩 Vue 3 watch 源码详解(含完整注释)
前端·javascript·vue.js
苏打水com11 小时前
JavaScript 入门学习指南:从零基础到能写交互效果
javascript
大前端helloworld12 小时前
前端梳理体系从常问问题去完善-框架篇(Vue2&Vue3)
前端·javascript·面试
嫂子的姐夫12 小时前
11-py调用js
javascript·爬虫·python·网络爬虫·爬山算法
Dajiaonew12 小时前
Vue3 + TypeScript 一篇文章 后端变全栈
前端·javascript·typescript
勤奋菲菲15 小时前
Koa.js 完全指南:下一代 Node.js Web 框架
前端·javascript·node.js
10年前端老司机15 小时前
面试官爱问的 Object.defineProperty,90%的人倒在这些细节上!
前端·javascript
用户479492835691516 小时前
TypeScript 和 JavaScript 的 'use strict' 有啥不同
前端·javascript·typescript