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: `<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]);
}
