1.本文的來源于項目诉探，簡潔項目的代碼溺忧，使地圖支持用組件
import Vue from 'vue/dist/vue.esm.js'
2.以下是vue中支持用el野来，來獲取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]
});
//點擊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]);
}
