Question

我使用react-Leaflet标记在地图上显示一些文字（一些黑客）

一切都很好，但如果文本靠近某个圆形组件，则圆形组件不会绑定鼠标悬停事件。

我以这种方式显示标记

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

在标记工具提示上显示反应传单

1 个答案: