//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)
}
react项目中,百度地图的marker上添加数字
最新推荐文章于 2023-06-05 14:44:49 发布