项目场景:
vue el-scrollbar +百度地图
例如:vue 使用 vue-baidu-map 地图 el-scrollbar 中嵌套百度地图出现缩放偏移量
原因分析:

分析:因为baidu地图到el-dialog上 但是滚动条滚动 里面的内容也是间接的向上transfrom 偏移 造成百度地图缩放偏移

解决方案:
提示:监听el-scrollbar 的滚动量 给map的div 的style 进行transform 修改偏移量
mounted() {
this.$nextTick(() => {
this.$refs.scrollbar1.wrap.addEventListener("scroll", this.handleScroll);
})
},
handleScroll() {
let top = this.$refs.scrollbar1.wrap.scrollTop
console.log(tope)
let myditu = document.getElementById('myditu')
myditu.style.transform = 'translateY(' + top + 'px' + ')';
myditu.style.position = 'absolute';
myditu.style.top = '-' + top + 'px'
},
文章讲述了在Vue项目中,如何通过监听el-scrollbar的滚动事件来调整百度地图的transform值,以解决在el-scrollbar中嵌套地图时的缩放偏移问题。作者提供了相应的代码片段,包括在mounted钩子函数中添加滚动事件监听和处理滚动的方法。
3154






