在“標記”工具提示上顯示反應葉圓

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;
}