在vue中使用高德地图添加窗体

1.去高德地图开发官网高德开放平台 | 高德地图API

2 搜索“信息窗体和右键菜单” ，点击第一个

3 选择 默认信息窗体

4 在自己的代码中创建窗体

代码如下

data() {return {infoWindow: "",map: "",//地图实例化对象info: [],//信息窗体的内容}}, methods: {initMap() {this.map = AMapLoader.load({"key": "ce55ff31b2ec8da2ea6fdd74663562d6", // 申请好的Web端开发者Key，首次调用 load 时必填"version": "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15"plugins": [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等"AMapUI": { // 是否加载 AMapUI，缺省不加载"version": '1.1', // AMapUI 缺省 1.1"plugins": [], // 需要加载的 AMapUI ui插件}}).then(AMap => {this.map = new AMap.Map("container1", {//设置地图显示的缩放级别zoom: 14,// 是否允许鼠标拖拽dragEnable: true,// 鼠标滚轮放大缩小scrollWheel: true,// 双击放大缩小doubleClickZoom: true,// 键盘控制发达缩小移动旋转keyboardEnable: false,// 手势控制touchZoom: false,center: [114.60794417790987, 38.01886471359529],//设置地图中心点坐标//在指定位置打开信息窗体});//构建信息窗体中显示的内容this.info.push("<p class='input-item'>河北省石家庄市方大科技园</p></div></div>");this.infoWindow = new AMap.InfoWindow({content: this.info.join("") //使用默认信息窗体框样式，显示信息内容});this.infoWindow.open(this.map, this.map.getCenter());}).catch(e => {console.log(e);});},},

窗体的dom

<div content="info"></div>

最终的效果

如果不会在vue-cli引入高德地图可以参考以下文章

vue-cli中使用高德地图_abs_botton的博客-CSDN博客_vue引入高德地图