Estoy tratando de mostrar en un mapa de Google marcadores basados en lat y lng de un archivo json.
Estoy importando los archivos así:
import * as crimeData from "../resources/newfile.json"; import * as aggAssault from "../resources/categories/AGG_ASSAULT.json"; import * as autoTheft from "../resources/categories/AUTO_THEFT.json"; import * as burglaryNonres from "../resources/categories/BURGLARY-NONRES.json"; import * as burglaryResidence from "../resources/categories/BURGLARY-RESIDENCE.json"; import * as homocide from "../resources/categories/HOMICIDE.json"; import * as larcenyFromVehicle from "../resources/categories/LARCENY-FROM_VEHICLE.json"; import * as larcenyNonVehicle from "../resources/categories/LARCENY-NON_VEHICLE.json"; import * as rape from "../resources/categories/RAPE.json"; import * as robberyCommercial from "../resources/categories/ROBBERY-COMMERCIAL.json"; import * as robberyPedestrian from "../resources/categories/ROBBERY-PEDESTRIAN.json"; import * as robberyResidence from "../resources/categories/ROBBERY-RESIDENCE.json";cada expediente es una categoría de delito.
cuando uso esto funciona:
function Map() { return ( <> <GoogleMap defaultZoom={10} defaultCenter= {{lat: 33.8547, lng: -84.38895}} > {crimeData.crimes.map((crime) => ( <Marker key={Math.random()} position = {{lat: parseFloat(crime.lat), lng: parseFloat(crime.long)}} /> ) )} </GoogleMap> </> ); } const WrappedMap = withScriptjs(withGoogleMap(Map));pero necesito cambiar crimeData a uno de los otros archivos según una condición.
He intentado esto:
const array= [aggAssault, autoTheft, burglaryNonres, burglaryResidence, homocide, larcenyFromVehicle, larcenyNonVehicle, rape, robberyCommercial, robberyPedestrian, robberyResidence ]y reemplacé crimeDate con array[1] por ejemplo y obtengo un error. el error es un error de tipo, supongo que no está tomando array[2] como un archivo json importado, alguna idea sobre cómo hacerlo. Gracias.
Es mejor hacer el estado crimeData .
La idea básica...
interface CrimePoint { lat: number long: number } const crimes = [aggAssault, autoTheft, .. etc] const [crimeData, setCrimeData] = useState<CrimePoint[]>(crimes[0]) handleSelect(index /* from somewhere */) => {setCrimeData(crimes[index])}Probablemente tendrá que derivar el índice usando algo más complejo, como...
const arrayByType = [ { type: 'aggAssault' data: aggAssault }, { type: 'autoTheft' data: autoTheft }, ] // from an input or select handleSelect(e) => { const toFind = e.target.value const found = arrayByType.find((el) => (el.type === toFind)) setCrimeData(found.data) }o...
const crimesAsObj = { aggAssault, autoTheft, // etc. } const mapByType = new Map<string, CrimePoint[]>() for (const [key, value] of Object.entries(crimesAsObj)) { mapByType.set(key, value) } // from an input or select handleSelect(e) => { const toFind = e.target.value const data = mapByType.get(toFind) setCrimeData(data) }