vue3在子组件中使用高德地图

在Vue3中，使用高德地图API在子组件中通常涉及到以下几个步骤：

1. **安装依赖**：首先，你需要安装`@vuegis/vue-gmap`这个库，它是一个封装了高德地图的Vue组件化解决方案。你可以通过npm或yarn进行安装：

   npm install @vuegis/vue-gmap

或者

   yarn add @vuegis/vue-gmap

2. **导入并注册组件**：在你的子组件文件中，import VueGMap组件并将其添加到Vue的原型上以便在整个应用中使用：

   import { VueGMap } from '@vuegis/vue-gmap';

   Vue.component('vue-g-map', VueGMap);

3. **在模板中使用组件**：然后在组件模板里引入`<vue-g-map>`标签，并传递你需要的地图配置选项，比如中心位置、初始缩放等：

   <template>
     <div>
       <vue-g-map :center="mapCenter" :zoom="mapZoom"></vue-g-map>
     </div>
   </template>

   <script>
   export default {
     data() {
       return {
         mapCenter: [116.404, 39.915], // 北京坐标
         mapZoom: 13,
       };
     },
   };
   </script>

4. **配置地图实例**：可以在组件的methods或者生命周期钩子（如`mounted()`）中初始化地图实例，如果需要监听地图事件或绑定自定义功能，可以在适当的地方处理。

<script>
export default {
  mounted() {
    this.$refs.vueGMap.init(); // 使用ref引用地图元素
  },
  methods: {
    onMapReady(map) {
      map.on('click', (event) => {
        console.log(`点击位置: ${event.lnglat}`); // 监听地图点击事件
      });
    }
  }
};
</script>