需求如下:百度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()
}
}