React Native Maps - 使用 Google Maps API 顯示來自 JSON 文件的標記

Question

我在我的 React Native 應用程序中使用 Google 地圖 API 作為屏幕。 目前我可以顯示標記，但它們是 static - 我已經手動寫下每個位置，如下所示：

function MapScreen(props) {
    return (
      <SafeAreaView style={styles.container}>
        <MapView 
          style={StyleSheet.absoluteFillObject}
          customMapStyle={mapStyle}
          showsUserLocation={true}
          provider={PROVIDER_GOOGLE}
          initialRegion={{latitude: 48.859402329205615,longitude: 2.350319507571479,latitudeDelta: 0.112,longitudeDelta: 0.112,}}>
          <Marker 
            coordinate={{latitude: 48.860743444869,longitude: 2.33765948065037,}}
            title="Louvre Museum"
            description="Former historic palace housing huge art collection, from Roman sculptures to da Vinci's 'Mona Lisa.'"
          />
          <Marker 
            coordinate={{latitude: 48.8738950614665,longitude: 2.29503917806517,}}
            title="Arc de Triomphe"
            description="Iconic triumphal arch built to commemorate Napoleon's victories, with an observation deck."
          />
          <Marker 
            coordinate={{latitude: 48.8584176451512,longitude: 2.29446518532972,}}
            title="Eiffel Tower"
            description="Gustave Eiffel's iconic, wrought-iron 1889 tower, with steps and elevators to observation decks."
          />
        </MapView>  
      </SafeAreaView>
    );
}
export default MapScreen;

但是我要添加更多標記並能夠輕松更新 map。我將相同的數據存儲在 JSON 文件中，該文件存儲在路徑： “./constants/ParisLocations.json”

JSON 的格式如下：

[
 {
   "siteName": "Louvre Museum",
   "Latitude": 48.86074344,
   "Longitude": 2.337659481,
   "Description": "Former historic palace housing huge art collection, from Roman sculptures to da Vinci's \"Mona Lisa.\""
 },
 {
   "siteName": "Arc de Triomphe",
   "Latitude": 48.87389506,
   "Longitude": 2.295039178,
   "Description": "Iconic triumphal arch built to commemorate Napoleon's victories, with an observation deck."
 },
 {
   "siteName": "Eiffel Tower",
   "Latitude": 48.85841765,
   "Longitude": 2.294465185,
   "Description": "Gustave Eiffel's iconic, wrought-iron 1889 tower, with steps and elevators to observation decks."
 },
 {
   "siteName": "Cathédrale Notre-Dame",
   "Latitude": 48.85294707,
   "Longitude": 2.350142233,
   "Description": "Towering, 13th-century cathedral with flying buttresses & gargoyles, setting for Hugo's novel."
 },
 {
   "siteName": "Sacré-Cœur",
   "Latitude": 48.88670304,
   "Longitude": 2.343082828,
   "Description": "Iconic, domed white church, completed in 1914, with interior mosaics, stained-glass windows & crypt."
 }
]

是否可以編寫一個 function 輸出所有位置作為 JSON 文件中的標記？

Answer 1

您可以使用以下命令加載本地 JSON 文件：

var json = require('./constants/ParisLocations.json');

如果 JSON 數據在服務器上，請使用：

$.getJSON('constants/ParisLocations.json', function(json) {
  ...
});

（或fetch ，或axios ...）

加載數據后，遍歷它並添加您的標記。