页面设置 transform scale 缩放后，鼠标光标错位

Question

页面设置了transform:scale(0.7)，再使用 S2 库后，鼠标的坐标就乱了

不知道是哪里出现了问题，把线上的例子 使用 transform 缩放也有此问题，这怎么搞呢？

S2 地址

Answer 1

其他的库可以按 1 楼和 2 楼朋友的方法，关于我这个 S2，找到了官方文档里有个常见问题，里边有该解决办法：

const s2Options = {
   supportCSSTransform: true
}

可见常见问题

Answer 2

这个我们做低代码平台的时候也遇到过,当初想着能从css层面入手 最后都是失败了

最后还是依靠 JavaScript 去动态匹配 scale 的值,然后做对应的逻辑操作

举栗子
本来偏移量 offsetX = 200

那么当你 scale = 0.5 的时候

offsetX 就应该是 offsetX=offsetX*scale 为 100

Answer 3

我之前遇到过类似的问题也是加了缩放之后页面上地图的鼠标坐标不正确,
只有地图不正确,其他的没发现问题,
我的解决方案是将地图反向缩放就好了
比如你整个页面元素 缩放比列是 1920 / 960 = 0.5
那么地图的缩放比列就是 960 / 1920 = 0.0489296636086
反向缩放即可解决
希望能帮到你