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

clipboard.png
1: 定义全局(事件)函数

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

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

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

2 : 使用 vue.extend() 生成html

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

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

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值