vue3高德地图使用英文

Vue3与高德地图(Amap)的集成通常涉及到在其官方提供的JavaScript API上创建交互式地图组件。在Vue3项目中，你可以使用`@vue-amap/core`这个官方插件来轻松地将高德地图引入并管理。以下是基本步骤：

1. 安装依赖：

npm install @vue-amap/core amap-jsapi-v3

2. 在main.js或Vue.config.js中配置地图API：

import AMap from '@vue-amap/core';
AMap.initAMapApiLoader({
  key: 'your_amap_key', // 高德地图API密钥
  plugin: ['AMap.Map', 'AMap.Marker', 'AMap.Geolocation'],
  callback: function () {
    // API加载完成后的回调
    Vue.use(AMap);
  }
});

3. 在组件中使用地图：

<template>
  <div id="map" style="height: 500px;"></div>
</template>

<script>
export default {
  setup() {
    const map = ref(null);

    // 初始化地图实例
    onMounted(() => {
      const amap = new AMap.Map('map', {
        zoom: 10,
        center: [116.404, 39.915] // 北京坐标
      });
      map.value = amap;
    });

    return { map };
  }
};
</script>