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

Posted 2023-03-28

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

【英文标题】：React Native - Map Data from JSON can be displayed as text but not map marker coordinates

【发布时间】：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.LatitudedynamicData.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."
        
]

【参考方案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>