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

hot_pot_Leo 发布于2019-08-26 10:46 / 2355人阅读

摘要：需求是点击标注的坐标，弹出信息窗口，信息窗口里面绑定事件。由于天地图创建标注，每个标注的名字不一样，所以需要动态添加元素。传入参数图标信息。

需求是点击标注的坐标，弹出信息窗口，信息窗口里面绑定事件。
由于天地图创建标注，每个标注的名字不一样，所以需要动态添加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。
想不到其他的办法，所以先记录下来，以后有好的处理方法了再优化代码。

云服务器 GPU云服务器事件绑定重复绑定事件绑定点击事件 javascript事件绑定

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106740.html

vue地图可视化 ArcGIS篇（3）

摘要：不建议底图选择中存在两种不同坐标体系，如下图坐标存在明显的偏差，火星坐标在采用坐标系的地图上位置偏上彩色中国天地图全球卫星地图例如我们使用的类进行查找，返回的数据都是国际坐标，因此必须进行偏差纠正。 ArcGIS for javascript开发心得本次实例中采用ArcGIS for javascript3.24版本，由于版本3与4在API等存在较大区别，就不一一列举，详细区别看官方...

oogh 2019-08-23 12:38 评论0 收藏0
vue常用知识点总结

摘要：这里借鉴了一下的处理方式，我们把单独模块的包装成一个函数，提供一个全局的回调方法，加载完成时候再调用回调函数。感谢本文引用链接的各位大佬们，小菜鸟我只是个搬运工 1.谈一谈你理解的vue是什么样子的？ vue是数据、视图分离的一个框架，让数据与视图间不会发生直接联系。MVVM 组件化：把整体拆分为各个可以复用的个体数据驱动：通过数据变化直接影响bom展示，避免dom操作。可以在...

xiaokai 2019-08-22 17:10 评论0 收藏0
【JavaScript系列】vue项目中实现滚动条（具体视窗口的滚动条）操作：（1）置底，（2）置于

摘要：滚动条不会出现在头部和底部视窗中。新增功能滚动条置底分页加载的时候，保持滚动条置于上次停留的位置。我们来看一下动态图，实现的功能今天只把这个具体视窗口的滚动条的总结一下，其他两个问题，没有很大的意义。一、前言之前写了一个happyChat的项目，主要是想学习一下socketIO的使用。然后最近在给happyChat做前端优化和升级。发现第一版做的很low。需要优化的问题： 1、问...

lovXin 2019-08-26 14:00 评论0 收藏0
vue.js学习笔记

摘要：指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于。对象形式佐客汤姆咪口修饰符修饰符是以半角句号指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。修饰符修饰符允许你控制由精确的系统修饰符组合触发的事件。指令指令(Directives)是带有v-前缀的特殊属性。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。 v-if条件判断 T...

levy9527 2019-08-22 16:24 评论0 收藏0