1.本文的來(lái)源于項(xiàng)目，簡(jiǎn)潔項(xiàng)目的代碼，使地圖支持用組件
import Vue from 'vue/dist/vue.esm.js'
2.以下是vue中支持用el，來(lái)獲取dom

image.png

3.使用前先將 彈框內(nèi)容做成子組件引入
import info from '@/components/windowInfo'

init() {
      this.map = new window.AMap.Map('map', {//創(chuàng)建地圖
        resizeEnable: true,
        center: [104.063182, 30.544619],
        zoom: 15,
      });
      
      let marker = new window.AMap.Marker({//創(chuàng)建marker
        map: this.map,
        position: [104.063182, 30.54461]
      });
      //點(diǎn)擊marker彈出自定義的信息窗體
      window.AMap.event.addListener(marker, 'click', ()=> {
        this.windowInfo()
      });
    },
    windowInfo(){
       let infoWindow = new window.AMap.InfoWindow({//創(chuàng)建彈框
        isCustom: true,  //使用自定義窗體
        offset: new window.AMap.Pixel(16, -45)
      });
      this.createInfoDom(infoWindow, this.name)
    },
    createInfoDom(infoWindow, item){//自定義彈框
      let Content = Vue.extend({//自定義模板繼承
        template: `<base-info :propData="nameExtend"></base-info>`,
        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]);
    }