在标记工具提示上显示 react-leaflet 圆圈

Question

我使用 react-Leaflet 标记在地图上显示一些文本（一些 hack）

都可以，但是如果文本靠近某个圆形组件，圆形组件不会绑定鼠标悬停事件。

我用这种方式显示标记

this.shapes['texts'] && this.shapes['texts'].map(text => {
                        return (
                            <Marker key={text['id']}
                                    position={text['coordinates']}
                                    draggable={false}
                                    opacity={0.01}
                                    icon={this.mapService.createMarkerIcon()} >
                                {
                                    this.props.showText ?
                                    <Tooltip direction={"center"} permanent className={'shape-tooltip'} bringToBack={true}>
                                        {
                                            text["rotation"] ?
                                            <div style={{transform: "rotate(" + text["rotation"] + "deg)"}}>{text['text']}</div> :
                                            <div>{text['text']}</div>
                                        }
                                    </Tooltip> :
                                    null
                                }
                            </Marker>
                        );
                    })

和圈子

return (
            <div className={'SeatsLayer'}>
                {
                    this.seats.map(seat => {
                        let x = parseInt(seat['xPosition'], 10);
                        let y = parseInt(seat['yPosition'], 10);
                        return (
                            <Circle onClick={() => this.props.addTicketToTicketsList(seat)}
                                    key={seat['seatLabelId']}
                                    center={[x, y]}
                                    radius={7}
                                    color={this.defaultSeatsBorderColor}
                                    fillColor={this.getColor(seat['categoryId'], seat['bookingStatusId'])}
                                    fillOpacity={0.6}
                                    weight={100}
                                    renderer={this.props.renderer}
                                    opacity={this.isSelectedSeat(seat) ? 1 : 0.01}>
                                <Tooltip direction={"top"} className={"seat-tooltip"}>
                                    <div>
                                        <span>Reihe: {seat['row']} / Sitz: {seat['seat']}</span><br />
                                        <span>{this.getCategoryName(seat['categoryId'])}</span><br />
                                        <span>Zone: {this.getZoneName(seat['zoneId'])}</span><br />
                                    </div>
                                </Tooltip>
                            </Circle>
                        );
                    })
                }
            </div>
        )

如何将某些组件的显示优先级设置为高于标记工具提示？我知道我的要求在地理地图上可能没有意义，但就我而言，这是解决此类问题的唯一已知解决方案。

Answer 1

问题是我将标记图标的不透明度设置为 0.01。

总是有完全透明但仍在圆圈上方的图像。

我只需要隐藏CSS中的图像，问题就解决了。

.leaflet-marker-icon, .leaflet-marker-shadow {
    display: none !important;
}

在标记工具提示上显示 react-leaflet 圆圈

Display react-leaflet circle over Marker tooltip

javascript

reactjs

react-leaflet