高德地图中infoWindow使用vue组件

1.本文的来源于项目，简洁项目的代码，使地图支持用组件
import Vue from 'vue/dist/vue.esm.js'
2.以下是vue中支持用el，来获取dom

image.png

3.使用前先将 弹框内容做成子组件引入
import info from '@/components/windowInfo'

init() {
      this.map = new window.AMap.Map('map', {//创建地图
        resizeEnable: true,
        center: [104.063182, 30.544619],
        zoom: 15,
      });
      
      let marker = new window.AMap.Marker({//创建marker
        map: this.map,
        position: [104.063182, 30.54461]
      });
      //点击marker弹出自定义的信息窗体
      window.AMap.event.addListener(marker, 'click', ()=> {
        this.windowInfo()
      });
    },
    windowInfo(){
       let infoWindow = new window.AMap.InfoWindow({//创建弹框
        isCustom: true,  //使用自定义窗体
        offset: new window.AMap.Pixel(16, -45)
      });
      this.createInfoDom(infoWindow, this.name)
    },
    createInfoDom(infoWindow, item){//自定义弹框
      let Content = Vue.extend({//自定义模板继承
        template: ``,
        name: 'child',
        components: {
          'base-info': info //弹框用子组件包裹
        },
        data(){
          return {
            nameExtend:item
          }
        }
      });

      let component = new Content().$mount();

      infoWindow.setContent(component.$el);
      infoWindow.open(this.map, [104.063182, 30.54461]);
    }