vue 高德api 地图重新初始化

在Vue应用中使用高德地图API，如果需要重新初始化地图实例，通常是在某些特定条件下，比如组件卸载或数据更新导致地图的状态不再适用时。以下是重新初始化地图的基本步骤：

1. 定义地图变量并注入高德地图实例：

<template>
  <div ref="mapContainer"></div>
</template>

<script>
import { map } from 'vue-gmap';

export default {
  components: {
    GMap,
  },
  setup() {
    const map = map({
      el: this.$refs.mapContainer,
      zoom: 12,
      center: [116.404, 39.915], // 北京坐标
    });
    return { map };
  },
}

2. 当需要重新初始化地图时，可以清除之前的引用，并创建新的实例：

methods: {
  resetMap() {
    if (this.map) {
      this.map.clear(); // 清除之前的地图
      this.map = null;
    }
    
    // 创建新的地图实例
    this.map = map({
      el: this.$refs.mapContainer,
      zoom: 12,
      center: [116.404, 39.915],
    });
  },
},

然后在适当的时候调用`resetMap()`方法。