vue 实现高德地图自定义信心窗体

<template>
  <div class="app-container" :style="{ height: windowHeight - 50 + 'px' }">
    <div id="container"></div>
  </div>
</template>

<script>
  export default {
    name: "index",
    data() {
      return {
        //实时屏幕高度
        windowHeight: document.documentElement.clientHeight,
        map: null,
        infoWindow: null
      }
    },
    mounted() {
      // 当浏览器被重置大小时执行
      window.onresize = () => {
        return (() => {
          this.windowHeight = document.documentElement.clientHeight;
        })()
      };
      //调用地图初始化方法
      this.initAMap()
    },
    methods: {
      initAMap() {
        //地图初始化时，在地图上添加一个marker标记,鼠标点击marker可弹出自定义的信息窗体
        this.map = new AMap.Map("container", {
          resizeEnable: true,
          center: [116.481181, 39.989792],
          zoom: 16
        });

        this.addMarker();

        let content = [];
        //实例化信息窗体
        content.push("
\n" +
          "      
\n" +
          "        方恒假日酒店  价格:318\n" +
          "        \n" +
          "      
\n" +
          "      
\n" +
          "      
\n" +
          "        \n" +
          "      
\n" +
          "      
\n" +
          "        
地址：北京市朝阳区阜通东大街6号院3号楼东北8.3公里
\n" +
          "        
电话：010-64733333
\n" +
          "        
详细信息
\n" +
          "      
\n" +
          "    
");

        this.infoWindow = new AMap.InfoWindow({
          isCustom: true,  //使用自定义窗体
          content: content, //调用创建信息窗体的方法--信息窗体的内容
          offset: new AMap.Pixel(16, -45)
        });
        /*
            给信息窗体添加一个打开事件
            因为只有窗体打开了, 才会加载dom元素, 然后给dom元素绑定事件
            而且, 必须是通过id获取 同过class获取不到
            这一个弄了半天, 太难了
         */
        this.infoWindow.on('open', this.showInfoOpen)
      },

      //打开信息窗体
      showInfoOpen() {
        let closeX = document.getElementById("closeX")
        //方法一: 为dom元素绑定js事件
        closeX.onclick = this.closeInfoWindow
        //方法二: 为dom元素绑定js事件
        //.addEventListener("click", this.closeInfoWindow)
      },

      //添加marker标记
      addMarker() {
        let that = this;
        that.map.clearMap();
        let marker = new AMap.Marker({
          map: this.map,
          position: [116.481181, 39.989792]
        });
        //鼠标点击marker弹出自定义的信息窗体
        marker.on('click', function () {
          that.infoWindow.open(that.map, marker.getPosition());
        });
      },

      //关闭信息窗体
      closeInfoWindow() {
        this.map.clearInfoWindow();
      }
    }
  }
</script>

<style scoped>
  #app-container {
    width: 100%;
    position: relative;
  }

  #container {
    width: 100%;
    height: 100%;
  }

  .info {
    position: absolute;
    background: white;
    padding: 10px;
    right: 30px;
    top: 30px;
  }
</style>