在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("
河北省石家庄市方大科技园

"); this.infoWindow = new AMap.InfoWindow({ content: this.info.join("") //使用默认信息窗体框样式，显示信息内容 }); this.infoWindow.open(this.map, this.map.getCenter()); }) .catch(e => { console.log(e); }); }, },

窗体的dom

 最终的效果

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

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