大屏可视化的响应式处理，兼容高德地图

最新推荐文章于 2025-02-19 17:27:18 发布

qq_21138747

最新推荐文章于 2025-02-19 17:27:18 发布

阅读量758

点赞数

文章标签：前端

原文链接：https://juejin.cn/post/7146117665247985700

版权

添加链接描述
地图问题

大屏上一般都会放地图，我这里使用的高德地图，发现高德地图被scale缩放后，与地图交互时的位置会错乱，比如点击地图某个位置，地图实际响应的是另一个位置；使用滚轮缩放地图时中心点也会偏移。
高德地图是用canvas展示的，这个是在交互时获取鼠标位置的问题，在网上搜了一下地图scale后的点位偏差问题，试了些解决方案都无效。
最终我的解决方式是：

将地图容器按照全局的scale再还原回去，位置偏移问题解决，但是地图显示较大
获取地图宽度，根据scale计算地图当前实际应该显示的宽高像素值，直接修改地图的宽高属性。

即修改地图真实的宽高，来适配其他部分scale之后的大小。

<body>
  <div id="app">
    <div class="text">调整页面窗口大小，文字通过父级scale被自动缩放，地图自动调整宽高自适应</div>
    <div id="map"></div>
  </div>

  <script>
    new AMap.Map('map');
    const map = document.getElementById('map')
    const app = document.getElementById('app')

    app.style.transformOrigin = '0 0'
    map.style.transformOrigin = '0 0'

    let scale = 1
    let preScale = 1 // 记录上次scale值，以便map做处理

    const resize = () => {
      const pageWidth = document.documentElement.clientWidth
      const defaultWidth = 7000 // 设计宽度
      preScale = scale
      scale = pageWidth / 7000
      app.style.transform = `scale(${scale})` // 使用scale对父级进行响应式
      resizeMap()
    }

    function resizeMap () {
      const {
        offsetWidth,
        offsetHeight
      } = map

      // 每次响应式，根据上次缩放比例计算是地图的设计宽高 offsetWidth / preScale
      const newWidth = (offsetWidth / preScale) * scale;
      const newHeight = (offsetHeight / preScale) * scale;

      map.style.transform = `scale(${1 / scale})` // 抵消父级的scale，还原map容器
      // 改变map容器真实宽高来适应屏幕变化
      map.style.width = newWidth + "px"
      map.style.height = newHeight + "px"
    }

    window.addEventListener('resize', resize)
    resize()
  </script>
</body>