当前位置：首页 > news >正文

大屏页面使用transform属性scale进行缩放，高德地图点击事件失效，地图展示模糊

news 来源：原创 2024/5/18 16:59:41

这里写自定义目录标题

大屏页面使用transform属性scale进行缩放，高德地图点击事件失效，地图展示模糊
- 1、大屏缩放自适应时使用tansform scale 缩放
- - - 1.1、window.resize 监听浏览器变化，动态获取要缩放的比例（宽高），新建文件 resetwh.js 然后引入即可
- 2、高德地图在缩放的页面中，点击事件失效
- - - - 2.1 方法一：通过iframe 嵌套地图页面或者组件（这里不做赘述）
      - 2.2 方式二：通过缩放将地图容器缩放回原来的尺寸

大屏页面使用transform属性scale进行缩放，高德地图点击事件失效，地图展示模糊

1、大屏缩放自适应时使用tansform scale 缩放

1.1、window.resize 监听浏览器变化，动态获取要缩放的比例（宽高），新建文件 resetwh.js 然后引入即可

window.onresize = function () {
    fnResize();
}
// 自执行一次，初始化
fnResize();
setTimeout(() => {
    fnResize();
}, 200)

function fnResize() {
    let screenWidth = document.body.clientWidth || document.documentElement.clientWidth;
    let screenHeight = document.body.clientHeight || document.documentElement.clientHeight;
    let defWidth = 1920;
    let defHeight = 1080;
    let xScale = screenWidth / defWidth;
    let yScale = screenHeight / defHeight;
    var style1 = document.createElement('style');
    style1.innerHTML = '#page{transform: scale(' + xScale + ',' + yScale + ')}';
    document.head.appendChild(style1);
	// rem 的根字体大小，不用可删除
    document.documentElement.style.fontSize = '100px';
}

2、高德地图在缩放的页面中，点击事件失效

2.1 方法一：通过iframe 嵌套地图页面或者组件（这里不做赘述）

2.2 方式二：通过缩放将地图容器缩放回原来的尺寸

思路：既然是缩放导致位置发生错位，导致点击的点不在地图的真实点位上，那么我们可以将地图的容器，再通过计算给缩放回来不就可以了吗？
代码：首先监听浏览器窗口变化，注意这里不能在使用 window.onresize了，不然会覆盖1中的监听事件

window.addEventListener('resize',this.resetMapSize)

能监听到，那么我们就获取容器，根据页面的缩放比，把地图的容器还原回去，也就是宽高比时原来的 1:1

// fnResize 方法和1中一样，只是获取当前缩放的比例 xScale， yScale
 resetMapSize() {
      let scaleWH = fnResize();
      let mapContent = document.getElementById("monitor-map");
      mapContent.style.transform = `scale(${1 / scaleWH.xScale},${
        1 / scaleWH.yScale
      })`
    }
// 用完后记得销毁监听事件 比如 vue 中
destroyed () {
    window.removeEventListener('resize',this.resetMapSize)
  }

个人推荐方法二，方法一iframe 要是有数据流转、交货等，通信相比而言比较麻烦。