vue2底层如何封装一个高德地图

要在 Vue2 中封装高德地图，可以使用 Vue2 的自定义指令（directive）来实现。以下是大致的实现思路：

1. 引入高德地图 JavaScript API，可以通过 script 标签引入，也可以通过 npm 安装并引入。

2. 在自定义指令中，创建一个地图实例，然后将其挂载到指定的 DOM 元素上。

3. 在地图实例创建完成后，可以通过高德地图提供的 API 进行各种操作，比如添加标记、绘制线条等等。

4. 为了方便地图的使用，可以将一些常用的操作封装成方法并暴露出去，供 Vue 组件使用。

下面是一个简单的实现示例：

<template>
  <div v-map />
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';

export default {
  directives: {
    map: {
      mounted(el) {
        AMapLoader.load({
          key: 'your amap key',
          version: '2.0',
          plugins: ['AMap.MarkerClusterer'],
        }).then((AMap) => {
          const map = new AMap.Map(el, {
            zoom: 10,
            center: [116.39, 39.9],
          });
          // 将地图实例挂载到指定的 DOM 元素上
          map.mount(el);

          // 添加标记
          const marker = new AMap.Marker({
            position: [116.39, 39.9],
            title: '北京市',
          });
          map.add(marker);

          // 将一些常用的操作封装成方法并暴露出去
          this.$map = {
            addMarker(position, title) {
              const marker = new AMap.Marker({ position, title });
              map.add(marker);
            },
            setZoom(zoom) {
              map.setZoom(zoom);
            },
          };
        });
      },
    },
  },
};
</script>

这样封装后，就可以在 Vue 组件中方便地使用高德地图了，比如：

<template>
  <div v-map />
  <button @click="addMarker">添加标记</button>
</template>

<script>
export default {
  mounted() {
    // 调用自定义指令中暴露的方法
    this.$map.addMarker([116.4, 39.9], '测试标记');
  },
  methods: {
    addMarker() {
      this.$map.addMarker([116.4, 39.9], '动态添加标记');
    },
  },
};
</script>

需要注意的是，这只是一个简单的示例，实际使用时还需要考虑一些细节问题，比如在组件销毁时要销毁地图实例，避免内存泄漏等。