@vuemap/vue-amap

Если вы считаете это полезным, можете добавить звездочку

// Установите основную библиотеку
npm i -S @vuemap/vue-amap
// Установите библиотеки, связанные с loca
npm i -S @vuemap/vue-amap-loca
// Установите другие расширяемые библиотеки, главным образом связанные с Threejs
npm i -S @vuemap/vue-amap-extra

// импорт
import VueAMap, {initAMapApiLoader} from '@vuemap/vue-amap';
import '@vuemap/vue-amap/dist/style.css';

// инициализация
initAMapApiLoader({
  // ключ AMap
  key: 'YOUR_KEY',
  securityJsCode: 'securityJsCode', // Новая версия ключа требует использования безопасного ключа
  //Loca:{
  //  version: '2.0.0'
  //} // Если вам требуется использовать библиотеку компонентов Loca, вам потребуется загрузить Loca
});
createApp(App).use(VueAMap)

npm install -D unplugin-vue-components unplugin-auto-import @vuemap/unplugin-resolver

npm install -D unplugin-vue-components unplugin-auto-import @vuemap/unplugin-resolver@1

import App from './App.vue'
import {initAMapApiLoader} from '@vuemap/vue-amap';
import '@vuemap/vue-amap/dist/style.css'
initAMapApiLoader({
    key: 'YOUR_KEY'
})

createApp(App)
    .mount('#app')

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {VueAmapResolver} from '@vuemap/unplugin-resolver'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [VueAmapResolver()],
    }),
    Components({
      resolvers: [VueAmapResolver()],
    }),
  ]
})

<template>
  <div class="map-page-container">
    <el-amap
      :center="center"
      :zoom="zoom"
      @init="init"
    />
  </div>
  <div class="toolbar">
    <button @click="add()">
      добавить маркер
    </button>
  </div>
</template>

<script lang="ts" setup>
  import {ref} from "vue";
  import {ElAmap} from "@vuemap/vue-amap";

  const zoom = ref(12);
  const center = ref([121.59996, 31.197646]);
  let map = null;
  const init = (e) => {
    const marker = new AMap.Marker({
      position: [121.59996, 31.197646]
    });
    e.add(marker);
    map = e;
    console.log('карта инициализирована: ', map)
  }
  const add = () => {
    const marker = new AMap.Marker({
      position: [121.59996, 31.177646]
    });
    map.add(marker);
  }
</script>

<style>
</style>