最近在做項目的時候，有個功能是點擊詳情按鈕的時候在一個彈框里展現(xiàn)出來列表的詳情
因為詳情彈框里面的數(shù)據(jù)有其他的表格數(shù)據(jù)，然后在彈框的下邊使用百度地圖展示后端發(fā)送過來的坐標點，然后把坐標點轉(zhuǎn)換之后使用百度地圖的方法制作覆蓋物上去。這里邊就出現(xiàn)了一個問題是：
百度地圖的父元素如果高度超過的了body并且出現(xiàn)了滾動條的情況，使用百度地圖的鼠標滾輪縮放功能是會發(fā)生偏移的，這個我在網(wǎng)上看了很多文章發(fā)現(xiàn)大多說的都是解決的話要么更換地圖。
要么把百度地圖放在body的可是區(qū)域內(nèi)，也就是說我可以把百度地圖放在彈框的上邊，注意剛開始時，我說的是把百度地圖放在了彈框的下邊并且上邊有其他的展示信息，經(jīng)過我一下午的倒騰終于發(fā)現(xiàn)他的這種偏移量是可以解決的：
可以看到此時我們的地圖處于彈框的下半部分，在百度地圖的父元素出現(xiàn)滾動條之后你向下滾動滾動條之后?，此時鼠標在放在百度地圖上就會發(fā)現(xiàn)鼠標縮放不會在鼠標的中心點，是會發(fā)生向上的偏移解決辦法就是我們要首先去監(jiān)聽這個滑輪滾動的事件
mounted() {//首先這里我在mounted函數(shù)里監(jiān)聽了滾輪滑動
window.addEventListener("scroll", this.handleScroll, true);
},
methods: {
handleScroll() {
let top = Math.floor(document.body.scrollTop || document.documentElement.scrollTop);
console.log(top);//這里獲取到滾輪body的高度位置
}
}這里要寫監(jiān)聽你百度地圖的父元素的滾動條高度位置，而不是body，要書寫的話我們用其他的獲取dom的方式比如：
? let classBox?= document.getElementsByClassName('*****')
? let box = classBox[0]
?let idDiv = document.getElementById('****')
用類名或者id獲取dom的方式來獲取你出現(xiàn)滾動條的父元素的滾動條位置高度
handleScroll() {
let ant = document.getElementsByClassName('ant-modal-wrap')
let box = ant[0]
let tope = Math.floor(box.scrollTop);
//為了修正百度地圖的父元素出現(xiàn)滾輪之后地圖出現(xiàn)的偏差
let mapDiv = document.getElementById('container')
mapDiv.style.transform = 'translateY(' + tope + 'px' + ')';
mapDiv.style.position = 'absolute';
mapDiv.style.top = '-' + tope + 'px';
},這里我使用的class來獲取dom元素之后用的scrollTop?這樣就監(jiān)聽到了滾輪條的位置，之后在獲取到百度地圖的dom在使用定位移動的方法就可以恢復(fù)了
這樣的原因是因為百度地圖的縮放是基于body層的，如果body層有滾動條，并且不在最頂端，在當前位置插入了百度地圖，也就是出現(xiàn)該問題時的狀態(tài)，這個時候滾輪縮放就會產(chǎn)生偏移。
所以結(jié)果是這樣的：文章來源：http://www.zghlxwxcb.cn/news/detail-841199.html
<template>
<a-modal>//modal彈框 要確定map的父元素相對定位
<div style="position: relative;height: 300px;width: 100%;">
<div id="container" class="map_scale" style="width: 100%;height: 100%;"></div>
</div>
</a-modal>
</template>
<script>
mounted() {
window.addEventListener("scroll", this.handleScroll, true)
},
methods: {
handleScroll() {
let ant = document.getElementsByClassName('ant-modal-wrap')
let box = ant[0]
let tope = Math.floor(box.scrollTop);
let mapDiv = document.getElementById('container')
mapDiv.style.transform = 'translateY(' + tope + 'px' + ')';
mapDiv.style.position = 'absolute';
mapDiv.style.top = '-' + tope + 'px';
},
}
</script>
寫的不對的話請大家指出來，因為我也不知道其他的好的解決辦法如果有的話在學習學習文章來源地址http://www.zghlxwxcb.cn/news/detail-841199.html
到了這里，關(guān)于解決百度地圖的父元素出現(xiàn)滾輪之后啟用鼠標縮放模式之后出現(xiàn)偏移的現(xiàn)象的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
