这里写自定义目录标题

• 大屏页面使用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， yScaleresetMapSize() {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 要是有数据流转、交货等，通信相比而言比较麻烦。