Estoy usando reaccionar Google Maps para representar un mapa con marcadores.
¿Cómo puedo cambiar el icono/html del marcador al hacer clic?
<GoogleMap defaultZoom={5} center={{ lat: (props.latLang && props.latLang.lat) ? props.latLang.lat : 51.5072178, lng: (props.latLang && props.latLang.lng) ? props.latLang.lng : -0.1275862 }} ref={mapRef} > { props.markers && props.markers.map((marker) => { return (marker.latitude && marker.longitude) ? <MarkerWithLabel position={{ lat: parseInt(marker.latitude), lng: parseInt(marker.longitude) }} labelAnchor={{ x: 50, y: 50 }} labelStyle={{ backgroundColor: "rgba(0,0,0,0)", fontSize: "32px", padding: "16px", width: '50px', height: '50px' }} onClick={markerClick} > <img onClick={imageClick} className={classes.grey} src={imageUrlFor(buildImageObj(marker.image)) .width(100) .height(100) .fit("crop") .url()} /> </MarkerWithLabel> : <></>; }) } </GoogleMap>El evento markerClick se activa al hacer clic, pero no puedo cambiar el icono. Por ejemplo, me gustaría cambiar la imagen classes.grey a una clase diferente al hacer clic, pero solo para el marcador en el que se hizo clic.
¿Algunas ideas?
Editar:
función marcadorClick:
const markerClick = function (e, x) { console.log('markerClick: ', e, '. x: ', x); }Lo siento, no sé React, pero en vanilla js, normalmente guardaría los objetos de marcador y luego usaría el método setIcon en el relevante. Consulte: https://developers.google.com/maps/documentation/javascript/reference/marker#Marker.setIcon
Usé la sugerencia de Andrew Lohr en el comentario anterior y ahora funciona. Así es cómo:
agregó la siguiente variable de estado:
const [activeMarkerId, setActiveMarkerId] = useState('');
Luego, el evento de clic del marcador:
const markerClick = function (marker) { setActiveMarkerId(marker.dashboardId);}
Y en la función de render:
<MarkerWithLabel position={{ lat: parseInt(marker.latitude), lng: parseInt(marker.longitude) }} labelAnchor={{ x: 25, y: 25 }} labelStyle={{ backgroundColor: "red", fontSize: "32px"}} onClick={() => markerClick(marker)} > <img onClick={imageClick} className={marker.dashboardId === activeMarkerId ? classes.greyActive : classes.grey} src={imageUrlFor(buildImageObj(marker.image)) .width(50) .height(50) .fit("crop") .url()} /> </MarkerWithLabel>¡Gracias, Andrew Lohr!