react-native-maps无法循环渲染多个Marker标记且坐标位置异常

核心问题原因 #

你当前的写法有两个常见错误会导致Marker无法正常渲染到目标坐标：

1. <Marker>组件被包裹在Fragment(<></>)中，大部分地图库仅识别<MapView>下直接子节点的Marker组件，包裹额外容器会导致Marker不被地图识别
2. 餐厅名称的<Text>组件和Marker平级放在MapView内部，会干扰地图组件对Marker的解析

修复后示例代码 #

import MapView, { Marker, Callout } from 'react-native-maps';

// 地图渲染部分
<MapView
  style={{ flex: 1 }}
  // 初始区域建议调整为包含所有餐厅坐标的范围，避免Marker在视野外
  initialRegion={{
    latitude: 37.78,
    longitude: -122.42,
    latitudeDelta: 0.1,
    longitudeDelta: 0.1,
  }}
>
  {restaurants.length > 0 && restaurants.map((res) => {
    const address = JSON.parse(res.address);
    // 可在此处打印address确认解析结果是否符合预期
    // console.log('解析后的坐标：', address)
    return (
      <Marker
        key={res.key} // 替换为数据自带的唯一标识，不要用数组index
        pinColor="purple"
        coordinate={{
          latitude: address.latitude,
          longitude: address.longitude
        }}
      >
        {/* 餐厅名称放在Marker的气泡组件中，点击Marker即可显示 */}
        <Callout>
          <Text>{res.resName}</Text>
        </Callout>
      </Marker>
    )
  })}
</MapView>

// 如果需要在地图外部展示餐厅列表，可在此处单独遍历渲染Text组件

额外排查点 #

• 确认你使用的地图库对coordinate的字段要求：部分国内地图库要求传入lat/lng字段，而非latitude/longitude，按需调整字段名即可
• 如果Marker仍不在预期位置，可手动打印解析后的坐标值，确认JSON.parse没有出现解析异常
• 不要把非Marker的组件直接放在MapView的直接子节点中，所有自定义内容要么放在Marker的子元素内，要么放在MapView组件外部

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