admin管理员组

文章数量:1642342

layer.bindTooltip(
`
	<divclass="tip-box">
	  <div class="tip-box-top">
	    <div class="item">米</div>
	    <div class="item">千米</div>
	    <div class="item">海里</div>
	  </div>
	  <div class="tip-box-bottom">
	    长度：${this.messureLength.toFixed(4)} 千米
	  </div>
	</div>
`,{direction:'top', permanent:true,interactive:true}).openTooltip();
 //permanent:true  让tooltip一直显示 ； interactive:true  让tooltip可以绑定事件
   
this.switchUnits(layer)

switchUnits(target) {
  let that = this
  let mytooltip = target.getTooltip()
  let items = mytooltip._container.getElementsByClassName('item')
  items.forEach((element,index) => {
    element.addEventListener('click',function () {
      let temp = ''
      switch(index)
      {
        case 0:
          temp = 'metre'
          break;
        case 1:
          temp = 'kilometre'
          break;
        case 2:
          temp = 'seamile'
          break;
      }
      that.changeVal(temp,mytooltip._container);
    });
  });
},

changeVal(val,element) {
  let dom = element.getElementsByClassName('tip-box-bottom')[0]
  if(val == 'metre') {
    let length = this.messureLength * 1000
    dom.innerHTML = `${length.toFixed(4)}`
  }else if(val == 'kilometre') {
    dom.innerHTML = `${this.messureLength.toFixed(4)}`
  }else if(val == 'seamile') {
    let length = this.messureLength * 0.539956803456
    dom.innerHTML = `${length.toFixed(4)}`
  }
},

本文标签： 绑定元素事件内容tooltip

版权声明：本文标题：给Tooltip内元素 绑定事件 改变Tooltip显示内容（leaflet、bindTooltip ） 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/xitong/1729336252a1197018.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。