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

本文链接：https://blog.csdn.net/BrocYu/article/details/105095840

本文介绍了一种使用ComplexCustomOverlay在地图上进行自定义标注的方法，通过设置marker的坐标点、动态数字和标识，实现了在地图上的精准标注。该方法利用了BMap.Overlay类创建自定义覆盖物，并通过jQuery设置了样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//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)
    }