React Native Maps - 使用 Google Maps API 从 JSON 文件中显示标记答案

【问题标题】：React Native Maps - Displaying markers from JSON file using Google Maps APIReact Native Maps - 使用 Google Maps API 从 JSON 文件中显示标记
【发布时间】：2021-10-21 01:19:11
【问题描述】：

我在我的 React Native 应用程序中使用 Google Maps API 作为屏幕。目前我可以显示标记，但它们是静态的 - 我已经手动编写了每个位置，如下所示：

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;

但是我要添加更多标记并能够轻松更新地图。我将相同的数据存储在 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."
 }
]

是否可以编写一个函数，将所有位置作为标记从 JSON 文件中输出？

【问题讨论】：

如果您尝试过，请以minimal reproducible example 的形式提供您的代码以及调试信息，而不是抱怨否决票。仅供参考，否决票和接近票不确定。
更进一步，这个问题已经被问过很多次了。在问之前做一些研究。 stackoverflow.com/questions/21401774/… - stackoverflow.com/questions/40971251/… - stackoverflow.com/questions/17514706/… - 等等

标签： javascript json react-native google-maps-api-3 marker

【解决方案1】：

您可以使用以下内容加载本地 JSON 文件：

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

如果 JSON 数据在服务器上，请使用：

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

（或fetch，或axios...）

加载数据后，循环遍历它并添加标记。

【讨论】：