0
225
Views¿Cómo cambiar las opciones de React MarkerClusterGroup cuando MarkerClusterGroup es un elemento principal?
Estoy usando la biblioteca de clústeres de folletos (v1.1.8) y estoy tratando de pasar opciones.
Quiero que la aplicación deje de mostrar cobertura al pasar el mouse por encima (vea la imagen a continuación). 
Pero cada vez que agrego las opciones showCoverageOnHover={false} no funciona.
<MarkerClusterGroup showCoverageOnHover={false}> <MarkersLayer stationsToDisplay={stationsToDisplay} stationsList={stationsList} refreshStationsList={this.refreshStationsList} StandsToDisplay={StandsToDisplay} CARToDisplay={CARToDisplay} selectedOption={selectedOption} /> </MarkerClusterGroup >La documentación muestra que el código correcto para pasar opciones sería:
<MarkerClusterGroup showCoverageOnHover={false} />Sin embargo, ya estoy pasando como apoyo:
<MarkerClusterGroup > <MarkersLayer stationsToDisplay={stationsToDisplay} stationsList={stationsList} refreshStationsList={this.refreshStationsList} StandsToDisplay={StandsToDisplay} CARToDisplay={CARToDisplay} selectedOption={selectedOption} /> </MarkerClusterGroup >Entonces, ¿cómo paso la opción? Lo he intentado dentro del , como se muestra a continuación, pero esto no funciona.
<MarkersLayer stationsToDisplay={stationsToDisplay} stationsList={stationsList} refreshStationsList={this.refreshStationsList} StandsToDisplay={StandsToDisplay} CARToDisplay={CARToDisplay} selectedOption={selectedOption} showCoverageOnHover={false} />Soy bastante novato en reaccionar, por lo que cualquier observación y sugerencia sería muy apreciada. muchas gracias
2 answers
Answer question0
De acuerdo con la nueva versión de API en 1.1.8, algo como esto funcionará:
<MarkerClusterGroup showCoverageOnHover={false} > <MarkersLayer stationsToDisplay={stationsToDisplay} stationsList={stationsList} refreshStationsList={this.refreshStationsList} StandsToDisplay={StandsToDisplay} CARToDisplay={CARToDisplay} selectedOption={selectedOption} /> </MarkerClusterGroup > Otro ejemplo del uso de markerClusterGroup podría ser útil:
import MarkerClusterGroup from 'react-leaflet-markercluster'; <MarkerClusterGroup> <Marker position={[49.8397, 24.0297]} /> <Marker position={[52.2297, 21.0122]} /> <Marker position={[51.5074, -0.0901]} /> </MarkerClusterGroup>;0
Al agregar los parámetros de esa manera en la clase misma, se soluciona el problema:
class MarkerClusterGroup extends MapLayer { createLeafletElement(props) { const el = new L.markerClusterGroup( { props, showCoverageOnHover:false, disableClusteringAtZoom: 13, } ); this.contextValue = { ...props.leaflet, layerContainer: el }; return el; } } export default withLeaflet(MarkerClusterGroup);