Vue中动态添加html并绑定事件（天图地图信息窗口绑定事件）

时间：2023-04-02 20:55:17 HTML

需要点击标记坐标，弹出信息窗口，在信息窗口绑定事件。由于天地地图创建了注解，每个注解的名字都不一样，所以需要动态添加Html元素。//创建信息窗口对象marker=newT.Marker(center);//创建标签map.addOverLay(marker);varinfoWin1=newT.InfoWindow();varsContent=''+''+'name

'+'

·基本信息

'+'

·检测因子数据

'+'

',infoWin1.setContent(sContent);marker.addEventListener("点击",function(){marker.openInfoWindow(infoWin1);});//给地图添加标记这是天图上的写法，但是这些onclick方法中的this是window，不符合要求。我想获取vue中的this指针，将dom写入Vue.extend()构造函数，然后创建一个实例，并将其挂载到您要挂载的元素上（newxxx().$mount()）。下面是大概念写法varenterpriseAll='';constPeriodDiv=Vue.extend({template:''+''+'{{enterpriseName}}'+'

·基础信息'+'

·检测因子数据'+'',props:['enterpriseName'],methods:{openInfo(){constID=this.$refs.enterpriseName.getAttribute('id');enterpriseAll.enterpriseBInfo(ID);},开法ctorMethod(){constID=this.$refs.enterpriseName.getAttribute('id');enterpriseAll.openFactorData(ID);},}});exportdefault{data(){return{}},mounted(){enterpriseAll=this;},methods:{enterpriseBInfo(id){//获取操作的id},openFactorData(id){//获取操作的idoperation},getMap(){//这里渲染地图lnglats标签图标数组for(leti=0;i{constinfoWin3=newT.InfoWindow({maxWidth:800,maxHeight:400});constcomponent=newPeriodDiv({propsData:{enterpriseName:row.PName}}).$mount();//每次添加一个新的infoWin3.setContent(component.$el);component.$refs.enterpriseName.setAttribute('id',row.id);//企业IDitem.openInfoWindow(infoWin3););},}}因为想获取组件中的方法，所以将组件的this赋值给变量enterpriseAll。注意vue.extend传参是propsData的思路。Dom放在组件中然后获取组件，然后设置组件。想不到其他的办法，先记录一下，等有好的处理方法再优化代码。

上一篇：uniapp零基础新手到项目实战

下一篇：FineReport填充分页设置

Vue中动态添加html并绑定事件（天图地图信息窗口绑定事件）相关文章