vue-amap根据地图上的标记自适应调整缩放比例

最近因为项目需要地图显示功能，我在vue项目中使用到了vue-amap插件。因为需要在地图上动态显示marker，但有时候地图初始化缩放比例无法满足同时看到所有marker，就想找找有没有什么方式可以根据所有marker位置自适应调整地图缩放比例。发现官方手册以及网上资源都没有可以完美解决该问题的办法，我一顿瞎操作，结果实现了这个功能。所以在这里记录一下，希望可以帮到有相关需要的友友。

<el-amap 
    :zoom="zoom" 
    :center="center"
    :events="events"
    view-mode="3D"
    map-style="amap://styles/fresh"
    ref="map">
</el-amap>

在地图的初始化设置中，定义:events="events"与:ref="map"。events负责响应自适应调整缩放比例这一事件，ref可以方便后期实例化地图进行相关操作。

data() {
    return {
      zoom:13,
      center: [117.178838, 39.108142],
      events:{
        complete:()=>{
          let overlaysList = this.$refs.map.$$getInstance().getAllOverlays('marker')
          this.$refs.map.$$getInstance().setFitView(overlaysList)
        },
      }
    };
},

this.$refs.map.$$getInstance()是实例化地图，使其可以调用getAllOverlays()和setFitView()这两个函数。getAllOverllays()是为了获取到所写参数的所有信息，本文是为了根据marker调整缩放比例，大家可以根据需求改变为其它参数。setFitView()就是根据输入的参数自适应调整缩放比例。值得强调的是，这些都是在complete事件，即地图及其所有组件加载完成后才会完成以上操作。