React Native问题：JSON地图数据可正常显示为文本但无法用于定位地图标记

我一眼就定位到了你代码里的问题——给Marker组件的coordinate属性赋值时，多套了一层不必要的大括号，这直接导致了Unexpected token, Expected ","的语法错误。

错误根源分析 #

你原来的代码是这样的：

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

这里的latitude:{dynamicData.Latitude}相当于在coordinate对象里又嵌套了一个子对象（即{ latitude: { dynamicData.Latitude } }），但coordinate要求的是直接传入数值类型的纬度和经度，这种嵌套结构完全不符合React Native MapView的API要求，所以JS解析器报错了。

修复后的代码 #

把多余的大括号去掉，同时别忘了给列表渲染的每个Marker添加唯一的key属性（React列表渲染的强制要求，避免警告）：

{this.state.data.map((dynamicData,i) => 
  <Marker 
    key={i} // 用索引作为临时key，有唯一ID的话优先用ID
    coordinate={{
      latitude: dynamicData.Latitude, 
      longitude: dynamicData.Longitude
    }}
  />
)}

完整修改后的组件代码 #

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 key={i}>{dynamicData.Latitude} {dynamicData.Longitude}</Text>)} */}
    {/* 修复后的Marker渲染 */}
    {this.state.data.map((dynamicData,i) => 
      <Marker 
        key={i}
        coordinate={{
          latitude: dynamicData.Latitude, 
          longitude: dynamicData.Longitude
        }}
      />
    )}
   </MapView>
  )
 }
}
export default MapScreen;

额外说明 #

• 你之前的Text组件能正常工作，是因为Text可以直接渲染数值类型的数据，不需要严格的对象结构，所以没暴露这个语法问题；
• 如果你的mapData里有每个地点的唯一标识（比如siteId），建议用这个唯一值作为key，比索引更稳定，避免列表更新时出现异常。

内容的提问来源于stack exchange，提问作者RickPeck