需求

在做一张图的过程中，经常会用到多个组件使用同一个Map或者Viewer的情况，因此需要将map或者viewer共享，可以将map定义为全局变量或者放在vuex中，但是这两种方法都不好用，原因如下：

1.一般map或者viewer比较大，放在data中作为响应式数据非常耗性能

2.挂载在全局变量时，一般都需要绑定一个dom，初始化赋值往往dom都还没有创建，强行定义一个往往导致逻辑有些乱

用provide解决这个问题

vue3中比较容易，地图加载完成后，调用

 provide('map', map)

完美解决问题

但是在vue2中provide()函数是在created之前执行，这时还没有dom，怎么办，解决方法：定义一个箭头函数

父组件中：

provide() {
    return {
      map: () => {
        return this.map;
      }
    };
  },
data() {
    return {
      mapLoaded: false
    };
  },


mounted(){
     this.initMap();
    this.mapLoaded=true
}

在templete中

 <div v-if="mapLoaded" class="legend"><Legends></Legends></div>

在子组件中就可以获取到

export default {
  inject: ["map"],
  data() {
    return {
      legends: legends
    };
  },
  mounted() {
    console.log(this.map());
  }
};

输出结果：