Vue中如何使用高德地图

效果图：

这是高德地图API文档地址：地图的创建-生命周期-示例中心-JS API 示例 | 高德地图API

1.安装

vue-amap安装

1

npm i --save vue-amap@0.5.10

2.main.js中的配置

key申请地址教程：准备-入门-教程-地图 JS API | 高德地图API

// 高德离线地图
import VueAMap from 'vue-amap';
Vue.use(VueAMap);
 
VueAMap.initAMapApiLoader({
  // 高德key
  key: 'd6eabbd08f89ccfb74278b36ab6342567', // 自己到官网申请，我随便写的
  // 插件集合 （插件按需引入）
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMa