可视化大屏百度地图滚轮缩放不以鼠标所在位置缩放问题。监听鼠标滚动事件

 此方法要确定大屏中无其他滚动项使用。切记。。。。。

 在大屏开发中使用百度地图遇到一个问题就是百度地图滚轮缩放不以鼠标所在位置缩放问题。而是以地图外部盒子的左上角为点缩放---诱发这个问题原因是父盒子使用position定位脱离标准流问题

问题修复，本人方法是使用监听鼠标事件，当滚轮事件触发后判断deltaY

是正数还负数，调用BMap的zoomIn()放大，zoomOut()缩小事件

代码如下：

//在mounted监听
mounted () {
   //  chrome and ie
   window.addEventListener('mousewheel', this.handleScroll, false)
    // firefox
   window.addEventListener('DOMMouseScroll', this.handleScroll,false)
},

handleScroll (e) {
     let direction = !(e.deltaY > 0)
     console.log(e)
     this.mapResize(direction)
 },
 // 地图放大、缩小 ksMap为实例化具体一个人写法为准
 mapResize (type) {
     ksMap.mapResize(type)
 },

　　/**
    *@description:地图层级缩放
    *@param{type} boolean true--放大 false--缩小
    *@return:
    */
    mapResize (type) {
        if (type) {
            this.map.zoomIn()
        } else {
            this.map.zoomOut()
        }
    }

以上方法可以解决上述问题，

方法二 由于父盒子定位导致盒子脱离标准流W3C， 硬改样式治本  请先看源代码：  https://www.cnblogs.com/huoshengmiao/p/14884434.html

 

 在原父盒子外面加个盒子使用flxe布局

js:如下修改

      pageResize () {
            // * 默认缩放值
            let scale = {
                width: '1',
                height: '1'
            }
            // * 设计稿尺寸（px）
            let baseWidth = 2880
            let baseHeight = 1080
            // * 需保持的比例（默认2.66667）
            const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
            // 当前宽高比
            const currentRate = parseFloat(
                (window.innerWidth / window.innerHeight).toFixed(5)
            )
            if (currentRate > baseProportion) {
                // 表示更宽
                scale.width = (
                    (window.innerHeight * baseProportion) /
                    baseWidth
                ).toFixed(5)
                scale.height = (window.innerHeight / baseHeight).toFixed(5)
                // this.$refs.appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
                this.$refs.appRef.style.transform = `scale(${scale.width}, ${scale.height})`
            } else {
                // 表示更高
                scale.height = (
                    window.innerWidth /
                    baseProportion /
                    baseHeight
                ).toFixed(5)
                scale.width = (window.innerWidth / baseWidth).toFixed(5)
                // this.$refs.appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)` //删除translate(-50%,-50%)
                this.$refs.appRef.style.transform = `scale(${scale.width}, ${scale.height})`
            }
        },

css:如下

.test_big {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;

    #main_box {
        // position: absolute;
        position: fixed;
        // top: 50%;
        // left: 50%;
        width: 2880px;
        height: 1080px;
        // transform: translate(-50%, -50%);
        // transform-origin: left top;
        // transform-origin: center;
        transform-origin: center center;
    }
}