高德信息弹窗中放置第三方插件，echarts等自定义元素组件库等

首先了解下_Vue—组件实例之$el

• 获取Vue实例的DOM元素，自mounted钩子函数开始生效，之前的钩子函数内无效。如下代码所示，Vue脚手架中，$el指向当前组件template模板中的根标签。

<template>
  <div id="root">
    <h1 @click="fn()">
      Lorem, ipsum 
    </h1>
  </div>
</template>
<script>
export default {
  methods: {
    fn() {
      console.log(this.$el); // <div id="root">...</div>
    }
  }
};
</script>

封装信息弹窗

根据上述我们就可以通过solt对信息弹窗内容的编辑，可以通过$el挂载到信息弹窗的option上就可以使用编写的第三方内容插件（代码如下）

初始化信息弹窗，并将$el挂载到content上面，内容就可以随意编辑，后续也是通过抛出this.instance弹窗对象，进行弹窗的事件处理，打开或关闭

    initInfowindow() {
      this.instance = this.createInstance();
      if (this.$el) {
        this.instance.setContent(this.$el);
      }
    },
    createInstance(option) {
      let instance = new AMap.InfoWindow({
        isCustom: true, // 使用自定义窗体
        autoMove: true,
        closeWhenClickMap: true,
        content: '',
        // 设置基点偏移
        offset: new AMap.Pixel(0, -300),
      });
      return instance;
    },