BMapLib.InfoBox dom點擊事件 Vue組件

需求如下：百度js地圖使用自定義信息窗口來自定義地圖彈窗，點擊彈窗內相應的dom能夠觸發vue的methods

---------------------------------------------代碼------------------------------------------

InfoBox觸發事件：相應的參數請參照文檔

 onMarkerClick: function(e) {
      var _this = this
      if (_this.infoBox) {
        _this.infoBox.close()
      }
      _this.infoBox = new BMapLib.InfoBox(this.map, _this.getInfoBoxContent(e.target.data), {
        boxStyle: {
          // opacity: '0.9',
          background: '#ffffff',
          width: '300px',
          height: '250px'
        },
        offset: _this.markerSize,
        closeIconUrl: closeIcon,
        closeIconMargin: '8px 8px 0 0',
        enableAutoPan: true
        // align: INFOBOX_AT_TOP
      })
      _this.infoBox.enableAutoPan()
      _this.infoBox.open(e.target)
    },

InfoBox創建：該方法是vue methods裏面的， 參數data是自己業務數據，裏面html拼接根據自己需求來修改，可直接看到‘查看詳情’標籤 onclick方法對應的是vue mounted註冊的window方法

     // 自定義信息窗體顯示內容
    getInfoBoxContent(data) {
      var headStr = '<div class="div-name">' + data.deviceName + '</div>'
      var bodyStr = ''
      for (var i = 0; i < data.factors.length; i++) {
        bodyStr += '<div class="div-factor">' + data.factors[i].key + '：' +             
        data.factors[i].value + '</div>'
      }
      var footStr = '<div class="div-btn"><a onclick="onInfoWindowClick()">查看詳情></a> 
      </div>'
      var html = `<div class="infoBoxContent">${headStr}${bodyStr}${footStr}</div>`
      return html
    }

在vue的mounted週期裏面註冊window方法，並在裏面調用vue的方法，

mounted() {
    this.createMap()
    this.showMarker()
    var _this = this
    window.onInfoWindowClick = function() {
      // alert('++++')
      _this.toDeviceDetail()
    }
  }