想要的效果如下 ：

高德地图 && 信息窗体

步骤一：

• 申请高德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**
*本博客文章均为作者原创，转载请注明作者和原文链接。*