百度地图 缩放 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"))
}
相关推荐
小爱丨同学37 分钟前
宏队列和微队列
前端·javascript
沉登c1 小时前
Javascript客户端时间与服务器时间
服务器·javascript
持久的棒棒君1 小时前
ElementUI 2.x 输入框回车后在调用接口进行远程搜索功能
前端·javascript·elementui
小程xy4 小时前
react 知识点汇总(非常全面)
前端·javascript·react.js
非著名架构师5 小时前
js混淆的方式方法
开发语言·javascript·ecmascript
多多米10056 小时前
初学Vue(2)
前端·javascript·vue.js
敏编程6 小时前
网页前端开发之Javascript入门篇(5/9):函数
开发语言·javascript
看到请催我学习6 小时前
内存缓存和硬盘缓存
开发语言·前端·javascript·vue.js·缓存·ecmascript
XiaoYu20028 小时前
22.JS高级-ES6之Symbol类型与Set、Map数据结构
前端·javascript·代码规范
儒雅的烤地瓜8 小时前
JS | JS中判断数组的6种方法,你知道几个?
javascript·instanceof·判断数组·数组方法·isarray·isprototypeof