我試圖在基于 lat 和 lng 的 json 檔案的谷歌地圖示記上顯示。
我正在匯入這樣的檔案：
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";
每個檔案都是一個犯罪類別。
當我使用它時它的作業原理：
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));
但我需要根據條件將crimeData 更改為其他檔案之一。
我試過這個：
const array= [aggAssault, autoTheft, burglaryNonres, burglaryResidence, homocide, larcenyFromVehicle, larcenyNonVehicle, rape, robberyCommercial, robberyPedestrian, robberyResidence ]
例如，用陣列 [1] 替換了crimeDate，我得到了一個錯誤。該錯誤是一個型別錯誤，我想它沒有將 array[2] 作為匯入的 json 檔案，任何關于如何操作的想法。謝謝你。
uj5u.com熱心網友回復：
最好做crimeData狀態。
基本思路...
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])}
您可能必須使用更復雜的東西來匯出索引，例如...
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)
}
或者...
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)
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/369283.html
標籤：javascript 节点.js 反应 json 前端