可視化大屏百度地圖滾輪縮放不以鼠標所在位置縮放問題。監聽鼠標滾動事件

 此方法要確定大屏中無其他滾動項使用。切記。。。。。

 在大屏開發中使用百度地圖遇到一個問題就是百度地圖滾輪縮放不以鼠標所在位置縮放問題。而是以地圖外部盒子的左上角為點縮放---誘發這個問題原因是父盒子使用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;
    }
}