@vuemap/vue-amap

Other language README

• 中文

Document

https://vue-amap.guyixi.cn

Introduce

• @vuemap/vue-amap is a map component based on Vue3 and AMap 2.0.
• This version upgrades the original vue-amap component, mainly adapting to amap2.0 related interfaces, while adjusting the event binding form to use v-on for event binding。
• The component will encapsulate the AMap visualization component loca and provide an interface for Threejs.
• This project is based on https://github.com/ElemeFE/vue-amap/ development.
• Support full import, on-demand import, and automatic import

Please use version 0. x for vue2, corresponding to the branch vue2

If you think it's useful, you can give it a star

Install

// Install core library
npm i -S @vuemap/vue-amap
// Install loca related libraries
npm i -S @vuemap/vue-amap-loca
// Install other extension libraries, mainly related to Threejs
npm i -S @vuemap/vue-amap-extra

Quick Start

import @vuemap/vue-amap

// import
import VueAMap, {initAMapApiLoader} from '@vuemap/vue-amap';
import '@vuemap/vue-amap/dist/style.css';

// init
initAMapApiLoader({
  // AMap key
  key: 'YOUR_KEY',
  securityJsCode: 'securityJsCode', // The new version of the key needs to be used in conjunction with a secure key
  //Loca:{
  //  version: '2.0.0'
  //} // If you need to use the Loca component library, you need to load Loca
});
createApp(App).use(VueAMap)

Auto Import

First you need install unplugin-vue-components 、 unplugin-auto-import 、 @vuemap/unplugin-resolver

Warning，If you want to use @vuemap/vue-amap@1，@vuemap/unplugin-resolvermust use 1.x.x version

Use @vuemap/vue-amap@latest version

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

Use@vuemap/vue-amap@1 version

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

Then import CSS and initialize keys in main.ts

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')

Modify the configuration file again and insert the following code into your Vite or Webpack configuration file

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()],
    }),
  ]
})

Component Demo

Map

<template>
  <div class="map-page-container">
    <el-amap
      :center="center"
      :zoom="zoom"
      @init="init"
    />
  </div>
  <div class="toolbar">
    <button @click="add()">
      add marker
    </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 init: ', map)
  }
  const add = () => {
    const marker = new AMap.Marker({
      position: [121.59996, 31.177646]
    });
    map.add(marker);
  }
</script>

<style>
</style>