解决大屏适配高德地图MassMarks（海量点）事件失效

公司有个新大屏项目，涉及到地图和大屏适配起初使用v-scale-screen这个插件，发现适配可以解决，但是地图海量点的点击事件全部失效，进过排查，发现时因为该插件使用了scale属性对元素进行等比例缩放

同时高德地图不支持scale属性必须时实际的尺寸宽高px单位，以下是高德地图对我的回复：地图容器不支持使用缩放，建议您避免直接对地图容器应用缩放

接着在网上找了很多方法：

1.给地图设置3d模式：亲测没用

2把地图元素等比例缩放回去：这个有点用但是当显示尺寸过大时地图永远是原来的固定宽高，导致地图没用适配效果如下：

3终极解决方案：使用autofit这个插件，里面有两个方法

1:ignore这个属性可以将元素反向缩放，也就是说和上面等比例缩放回去类似

2:elRectification方法

利用该方法的特性将缩放回去的元素再拉回屏幕的适配大小，比如地图元素的固定宽高为：1920*1080，屏幕尺寸为1920*1080时，使用ignore把地图缩放回原始宽高1920*1080刚好可以正确适配，但是当屏幕尺寸变成3840*2160，地图还是1920*1080就不行了，使elRectification方法可以把元素正确拉大以下是使用步骤

1:npm i autofit.js

2:在app.vue中引入 import autofit from 'autofit.js'

3:在app.vue的mounted中初始化autofit，其中dw和dh为设计稿宽高，ignore中填入地图容器的id

 mounted(){
    autofit.init({ //屏幕适配插件
      dh: 1080,
      dw: 1920,
      el: "body",
      resize: true,
      ignore:['#homeMap'],//必填
    })
    
  },

4.如果地图容器拆成了组件就在父组件所在的vue中引入elRectification,同时因为该函数要求确保组件挂载完毕后才能执行所以使用this.$nextTick进行包裹

import { elRectification } from "autofit.js";
 mounted() {
    this.$nextTick(()=>{
      elRectification('#homeMap')
    })
}

5。刷新页面效果如下

6点击地图标记也正常

7：如果发现地图在某些分辨率下发生了偏移，建议给地图容器加一个position: absolute;使其相对body定位或者正确的父盒子进行定位