Vue2.0 和 高德地图自定义infowindow (infowindow自定义事件)

1

clipboard.png
第一种方法: 定义全局(事件)函数

   let infoWindow;
   let infoWindowContent = `
      <div class='info-window'>
        <
        <button  onclick='ClickFunction()'>事件</button>
      </div>
    `;
    infoWindow = new AMap.InfoWindow({
      content: infoWindowContent,
    });

  ClickFunction() 必须是全局函数  否则会报未定义错误 
  

但是此方法 获取不到当前组件对象(有的人需要获取组件对象 处理) 此方法便行不通

第二种方法 : 使用 vue.extend() 生成html

首先 引入vue   
    import Vue from 'vue';
    
    var _this = this    当前组件对象
    生成html 和 时间
       var MyComponent = Vue.extend({
            template: '<a style="color:#07bb49;" v-on:click="hello()">hello</a>',
            methods:{
                 hello:function() {
                        console.log(_this)
                        //点击事件 使用 组件对象
                  }
            }
        });
    var component= new MyComponent().$mount();
     infowindow 内容定义   
     var infoWindow = new AMap.InfoWindow({
                   content : component.$el
           });

infowindow 弹出实现在这忽略 详情查看高德地图

你可能感兴趣的

载入中...