react项目中,百度地图的marker上添加数字

//pointOut:marker的坐标点,indexOut:动态数字,name:每个marker设置的标识
@action setIconNum = (pointOut, indexOut, name) => {

let map = this.map

function ComplexCustomOverlay(point, index, name) {

this._point = point

this._index = index

this._name = name

this._map = map

}

ComplexCustomOverlay.prototype = new BMap.Overlay()

ComplexCustomOverlay.prototype.initialize = function (map) {

let span = this._span = document.createElement("span")

span.className = `${this._name}${this._index}`

//这里用jquery设置样式

$(span).css({

'position': 'absolute',

// 'z-index': BMap.Overlay.getZIndex(this._point.lat),
'z-index': "3",

'display': 'block',

'width': '26px',

'color': '#FFF',

'text-align': 'center',

'point-events': 'none',

'font-size': `11px`
})

//设置数字也就是我们的标注

this._span.innerHTML = this._index + 1

map.getPanes().labelPane.appendChild(span)

return span

}

ComplexCustomOverlay.prototype.draw = function () {

var map = this._map

var pixel = map.pointToOverlayPixel(this._point)

//设置自定义覆盖物span 与marker的位置

this._span.style.left = pixel.x - 13 + 'px'

this._span.style.top = pixel.y - 11 + 'px'

}

let myCompOverlay = new ComplexCustomOverlay(pointOut, indexOut, name)

this.myCompOverlayArr.push(myCompOverlay)

this.map.addOverlay(myCompOverlay)
}