百度地图放大缩小的时候不以鼠标位置为中心点,放大向上,缩小向下???

参考了几篇帖子,原因应该是百度地图的底层加载逻辑导致的,具体的解决方案也因人而已,主要的思路有两个方向:
1、地图部分放到无滚动区域的dom中,只要不溢出,就不会缩放有问题
2、实时更新地图元素的scrollTop

帖主案例:React项目,引入百度地图,在Modal弹窗中显示位置信息,Modal中包含的内容很多,溢出滚动,百度地图复现上述bug,具体解决方案:

function InfoModal() {
	// 逻辑层
	...
	let wrapScroll = document.querySelector('.ant-modal-body');
    wrapScroll &&
        wrapScroll.addEventListener('scroll', () => {
            window.scrollY = wrapScroll.scrollTop;
        });
	return <Modal>
		...
		<map/>
	</Modal>
}

tips:.ant-modal-body调用的是ant的modal弹窗,.ant-modal-body是包含滚动条的dom元素

相关文章:
https://blog.csdn.net/qq_40259641/article/details/108384833
https://blog.csdn.net/fredricen/article/details/82193272

  • 8
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
好的,以下是一个简单的示例代码: ```html <template> <div class="container" ref="container" @mousemove="handleMouseMove"> <div class="image-container" ref="imageContainer" :style="imageStyle" @mousedown="handleMouseDown" @mouseup="handleMouseUp"> <img :src="imageUrl" alt="image" class="image" /> </div> </div> </template> <script> export default { data() { return { imageUrl: "https://picsum.photos/800/600", // 图片地址 isDragging: false, // 是否在拖拽 lastX: 0, // 上一次鼠标位置 lastY: 0, scale: 1 // 缩放比例 }; }, computed: { imageStyle() { return { transform: `scale(${this.scale})` }; } }, methods: { handleMouseMove(event) { if (this.isDragging) { const deltaX = event.clientX - this.lastX; const deltaY = event.clientY - this.lastY; const container = this.$refs.container; const imageContainer = this.$refs.imageContainer; const containerRect = container.getBoundingClientRect(); const imageRect = imageContainer.getBoundingClientRect(); if ( imageRect.left + deltaX <= containerRect.left && imageRect.right + deltaX >= containerRect.right ) { imageContainer.style.left = `${imageRect.left + deltaX}px`; } if ( imageRect.top + deltaY <= containerRect.top && imageRect.bottom + deltaY >= containerRect.bottom ) { imageContainer.style.top = `${imageRect.top + deltaY}px`; } this.lastX = event.clientX; this.lastY = event.clientY; } }, handleMouseDown(event) { this.isDragging = true; this.lastX = event.clientX; this.lastY = event.clientY; }, handleMouseUp() { this.isDragging = false; } } }; </script> <style> .container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-color: #f0f0f0; } .image-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .image { display: block; max-width: 100%; height: auto; } </style> ``` 这里使用了 `mousemove` 监听鼠标移动事件, `mousedown` 监听鼠标按下事件, `mouseup` 监听松开事件,实现了拖拽功能。同时,通过计算鼠标移动的距离,实现了图片的拖拽,并且限制了图片在容器内部移动。 同时,通过 `scale` 属性实现了图片的缩放功能,代码中通过 `computed` 计算属性来实现样式的动态绑定。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值