想要的效果如下 ：

高德地图 && 信息窗体

步骤一：

• 申请高德key

  高德开放平台 | 高德地图API (amap.com)

（可参考博客：   [996]如何申请高德地图用户Key_周小董的博客-CSDN博客_高德开发者平台申请key）

步骤二：

• npm安装

          npm install vue-amap --save

步骤三：

• main.js中挂载vue-amap

// 引入高德地图
import VueAMap from "vue-amap";

Vue.use(VueAMap);

// 初始化vue-amap
VueAMap.initAMapApiLoader({
  // 高德的key
  key: "8bcd5d53aee035144d261kkkegeigego",  // 换成你自己的key,这是我随便写的
  // 插件集合
  plugin: [
    "AMap.Autocomplete",
    "AMap.PlaceSearch",
    "AMap.Scale",
    "AMap.OverView",
    "AMap.ToolBar",
    "AMap.MapType",
    "AMap.PolyEditor",
    "AMap.CircleEditor",
  ],
  // 高德 sdk 版本，默认为 1.4.4
  v: "1.4.4",
});

步骤四：

• 组件用法

 补充：

 https://www.cnblogs.com/wwyxjjz/p/16291314.html

以上就是在vue项目中使用vue-amap调用高德地图api的基本使用，具体对地图的操作可以根据文档的规范来就可以了

作者：微微一笑绝绝子
出处：https://www.cnblogs.com/wwyxjjz/p/16291262.html
本博客文章均为作者原创，转载请注明作者和原文链接。