como dice el título, estoy tratando de representar múltiples marcadores sobre el mapa usando el folleto de reacción. Estoy recopilando todas las coordenadas que recibo de una respuesta BE y las coloco en una matriz. Cuando renderizo el componente, solo veo el mapa sin mis marcadores. Así que probablemente me esté perdiendo algo.
Aquí está mi código:
var arrCoordinates = [[/* coordinates 1 */], [/* coordinates2 */]...[/* coordinates n */]] function MultipleMarkers(){ const map = useMapEvent({ click(){ map.locate() } }) return arrCoordinate.map(coordinata => { <Marker position={coordinata} icon={new Icon({iconUrl: marker, iconSize: [25, 41], iconAnchor: [12, 41]})}> <Popup>{Object.keys(elem).length > 0 ? elem.bodyfindSegnalazione[0][0].indirizzo + ' ' + elem.bodyfindSegnalazione[0][0].civico + ' ' + elem.bodyfindSegnalazione[0][0].quartiere : ''}</Popup> </Marker> }) } return ( <div id="mapid" style={{display: showMap}}> <MapContainer center={center} zoom={12} scrollWheelZoom={true} style={{ height: "100%", width: "100%" }} > <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" /> <MultipleMarkers /> </MapContainer> </div> );Agradeceré cualquier sugerencia, gracias de antemano. Paz
Lo que te falta es la declaración de devolución antes de <Marker .
Debería ser
function MultipleMarkers() { const map = useMapEvent({ click() { map.locate(); } }); return arrCoordinates.map((coordinata) => { return ( <Marker position={coordinata} icon={new Icon({iconUrl: marker, iconSize: [25, 41], iconAnchor: [12, 41]})}> <Popup>{Object.keys(elem).length > 0 ? elem.bodyfindSegnalazione[0][0].indirizzo + ' ' + elem.bodyfindSegnalazione[0][0].civico + ' ' + elem.bodyfindSegnalazione[0][0].quartiere : ''}</Popup> </Marker> ); }); }