Estoy trabajando en React-Leaflet y estoy usando markerclusture para agrupar los marcadores en el mapa. El requisito es que, cuando hago clic en las burbujas agrupadas, debería poder ver la lista de marcadores dentro del grupo en la ventana emergente cuando hago clic en él. Pude lograr esa parte usando el siguiente código. Pero ahora lo que quiero es hacer clic en el nombre del marcador dentro de la ventana emergente y poder hacer zoom en ese marcador. Soy nuevo en el desarrollo web, por lo que podría estar complicando demasiado un problema simple, pero necesito solucionarlo. ¡¡Gracias por adelantado!!
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script> const _map = useMap(); <MarkerClusterGroup zoomToBoundsOnClick={false} spiderfyDistanceMultiplier={1} showCoverageOnHover={false} onClick={(e) => { var asset_list = e.layer.getAllChildMarkers(); var names = ""; for ( var i = 0; i < asset_list.length; i++ //for populating popup with the asset names under the clusture bubble ) { for (var j = 0; j < locations.length; j++) { if (locations[j].latitude == asset_list[i]._latlng.lat) names += `<span>${locations[j].id} </span>`; } } e.propagatedFrom.bindPopup(`${names}`).openPopup(); //want to attach a click event handler to the names list }} > {locations.map((loc) => ( <div> <CircleMarker key={loc.id} center={[loc.latitude, loc.longitude]} fillColor={marker_color} color="#fff" fillOpacity={2} radius={13} zoom={[loc.latitude, loc.longitude]} weight={3} className="circle-marker" ></CircleMarker> </div> ))} </MarkerClusterGroup>