vue插入使用地图（简易、即用）

要在Vue项目中引入高德地图，您需要按照以下步骤进行操作：

1.在 index.html 文件中引入高德地图的 JavaScript API：

<script src="//webapi.amap.com/maps?v=1.4.15&key=您的高德地图API Key"></script>

2.安装 vue-amap 库：

npm install vue-amap --save

3.在 main.js 文件中引入并注册 vue-amap：

import Vue from 'vue'
import VueAMap from 'vue-amap'

Vue.use(VueAMap)

4.在 mounted 阶段初始化地图，设置地图中心点和缩放级别：

mounted () {
  this.$amap.initAMapApiLoader({
    key: '您的高德地图API Key',
    plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType'],
    // 默认高德SDK版本为1.4.4
    v: '1.4.15',
    uiVersion: '1.0.11'
  })
  this.$amap.then(() => {
    const map = new this.$amap.Map('your-map-container-id', {
      center: [116.397428, 39.90923],
      zoom: 13
    })
  })
}

在这段代码中，您需要替换 您的高德地图API Key 和 your-map-container-id 分别为您的高德地图 API Key 和包含地图的 DOM 元素的 ID。

这样就可以在您的Vue项目中引入高德地图了！