动态添加html元素绑定事件,vue中动态添加html并绑定事件(天地图信息窗口绑定事件)...

需求是点击标注的坐标，弹出信息窗口，信息窗口里面绑定事件。

由于天地图创建标注，每个标注的名字不一样，所以需要动态添加Html元素。

//创建信息窗口对象

marker = new T.Marker(center);// 创建标注

map.addOverLay(marker);

var infoWin1 = new T.InfoWindow();

var sContent =

'

' +

'

' +

'

名称

' +

'

· 基本信息

' +

'

· 检测因子数据

' +

'

',

infoWin1.setContent(sContent);

marker.addEventListener("click", function () {

marker.openInfoWindow(infoWin1);

});// 将标注添加到地图中

这是天地图上面的写法， 但这样些onclick方法的this是window，这就不符合需求。

想要拿到vue中的this指针，将dom写到Vue.extend()构造器里，然后创建实例，并挂载到想要挂载的元素上(new xxx().$mount())。

以下是大概写法

var enterpriseAll='';

const PeriodDiv = Vue.extend({

template:'

' +

'

' +

'

{{enterpriseName}}

' +

'

· 基本信息

' +

'

· 检测因子数据

' +

'

',

props:['enterpriseName'],

methods: {

openInfo () {

const ID=this.$refs.enterpriseName.getAttribute('id');

enterpriseAll.enterpriseBInfo(ID);

},

openFactorMethod () {

const ID=this.$refs.enterpriseName.getAttribute('id');

enterpriseAll.openFactorData(ID);

},

}

});

export default {

data() {

return {}

},

mounted() {

enterpriseAll=this;

},

methods: {

enterpriseBInfo(id){ // 取到id进行操作},

openFactorData(id){ // 取到id进行操作},

getMap(){

// 这里渲染地图 lnglats标注图标的数组

for (let i = 0; i < lnglats.length; i += 1) {

this.drawTMakerOne(lnglats)

}

},

drawTMakerOne(lnglat){ // 往地图上添加一个marker。传入参数坐标信息lnglat。传入参数图标信息。

const marker = new T.Marker(new T.LngLat(lnglat.B, lnglat.L));

this.map.addOverLay(marker);

marker.addEventListener('click',() => {

const infoWin3 = new T.InfoWindow({ maxWidth: 800, maxHeight: 400 });

const component = new PeriodDiv({propsData:{enterpriseName:row.PName}}).$mount(); // 每次添加需要重新new一个

infoWin3.setContent(component.$el);

component.$refs.enterpriseName.setAttribute('id',row.id); // 企业ID

item.openInfoWindow(infoWin3);

);

},

}

}

因为想取到组件里面的方法，所以将组件的this赋值给变量enterpriseAll。

注意vue.extend传参是propsData

思路，dom放到组件里然后获取组件，再将组件set。

想不到其他的办法，所以先记录下来，以后有好的处理方法了再优化代码。