vue3 封装高德地图通用组件

• 页面效果

  

• 下载安装地图依赖

"dependencies": {
    "@element-plus/icons-vue": "1.1.4",
    "@vuemap/vue-amap": "^1.1.3", // --------------- 地图依赖
    "axios": "0.26.1",
    "echarts": "5.3.2",
    "element-plus": "2.1.8",
    "file-saver": "2.0.5",
    "fuse.js": "6.5.3",
    "js-cookie": "3.0.1",
    "jsencrypt": "3.2.1",
    "nprogress": "0.2.0",
    "vue": "3.2.31",
    "vue-cropper": "1.0.3",
    "vue-router": "4.0.14",
    "vuex": "4.0.2"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "2.3.1",
    "@vue/compiler-sfc": "3.2.31",
    "@vuemap/unplugin-resolver": "^1.0.3", // --------------- 地图依赖
    "sass": "1.50.0",
    "unplugin-auto-import": "^0.7.1",
    "unplugin-vue-components": "^0.19.5",
    "vite": "2.6.14",
    "vite-plugin-compression": "0.5.1",
    "vite-plugin-svg-icons": "1.0.5",
    "vite-plugin-vue-setup-extend": "0.4.0"
  }

• 在mian.js中注册引入

import VueAMap from '@/components/aMap/aMap'
app.use(VueAMap)

• 封装地图组件