React Native - 来自 JSON 的地图数据可以显示为文本，但不能显示为地图标记坐标答案

【问题标题】：React Native - Map Data from JSON can be displayed as text but not map marker coordinatesReact Native - 来自 JSON 的地图数据可以显示为文本，但不能显示为地图标记坐标
【发布时间】：2021-10-21 06:58:09
【问题描述】：

我已经能够从本地 JSON 文件中提取地图数据，并在我的应用程序上显示为文本。但是我无法使用这些数据在我的地图上定位标记。

我遇到问题的代码行是：

{this.state.data.map((dynamicData,i) => <Marker coordinate={{latitude:{dynamicData.Latitude}, longitude:{dynamicData.Longitude}}}></Marker>)}

以下是包含文本行的代码，当未注释掉该文本行时，将正确输出纬度和经度数据作为文本：

class MapScreen extends Component {
        constructor()
        {super();this.state={data: mapData}}
        render()
        {
                return(
                        <MapView 
                                style={StyleSheet.absoluteFillObject}
                                showsUserLocation={true}
                                customMapStyle={mapStyle}
                                provider={PROVIDER_GOOGLE}
                                initialRegion={{
                                        latitude: 48.859402329205615,
                                        longitude: 2.350319507571479,
                                        latitudeDelta: 0.012,
                                        longitudeDelta: 0.012,
                                        }}>
                                {/* {this.state.data.map((dynamicData,i) => <Text>{dynamicData.Latitude}{dynamicData.Longitude}</Text>)} */}
                                {this.state.data.map((dynamicData,i) => <Marker coordinate={{latitude:{dynamicData.Latitude}, longitude:{dynamicData.Longitude}}}></Marker>)}
                        </MapView>
                )
        }
}
export default MapScreen;

我相信理论上这种方法应该可行，但是尝试了一切都无济于事，返回错误：

意外的令牌，应为“，” 指线问题线。但是，在尝试了许多不同的选项后，我无法在该行中找到错误。

JSON 文件供参考：

export var mapData = [
        {
          "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."
        }
]

【问题讨论】：

标签： javascript react-native google-maps-api-3 google-maps-markers

【解决方案1】：

坐标类型应该是

  export interface LatLng {
    latitude: number; //float number not object
    longitude: number;//float number not object
  }

所以从{dynamicData.Latitude} 和{dynamicData.Longitude} 中删除{} 成为

 <Marker coordinate={{
     latitude:dynamicData.Latitude, 
     longitude:dynamicData.Longitude
}}></Marker>

【讨论】：