React Native MapView多标记点显示问题：API坐标无法渲染Marker

原代码核心问题 #

• 无多标记点存储状态：用setDataLoc但未定义对应useState，且每次调用会覆盖之前坐标，无法保存多个点
• API请求处理错误：map中直接用async/await不会等待所有请求完成，也未正确收集所有返回坐标
• 标记点渲染逻辑错误：遍历devices（元素是ID）时，尝试读取不存在的val.dataLoc属性
• 初始地图区域偏差：默认区域经度为115.9，而获取的标记点经度在110-112区间，初始视野看不到这些点

修改后的完整代码 #

import { useState, useEffect } from 'react';
import { View, StyleSheet } from 'react-native';
import MapView, { Marker } from 'react-native-maps';

export default function MapScreen() {
  // 存储所有标记点坐标，每个元素为{latitude, longitude}格式
  const [markerLocations, setMarkerLocations] = useState([]);
  const [curLoc, setCurLoc] = useState({
    latitude: 5.4895, // 调整为所有标记点的中间纬度
    longitude: 111.6397, // 调整为所有标记点的中间经度
    latitudeDelta: 1.5, // 放大足够显示所有点的范围
    longitudeDelta: 1.5,
  });

  useEffect(() => {
    const fetchAllLocations = async () => {
      if (!devices) return;
      try {
        // 用Promise.all批量处理所有API请求
        const locationPromises = devices.map(async (id) => {
          const response = await fetch(`https://www.schools.com/sc/api/${id}`, requestOptions);
          const data = await response.json();
          // 返回符合MapView要求的坐标格式
          return {
            latitude: parseFloat(data.data?.latitude),
            longitude: parseFloat(data.data?.longitude),
          };
        });
        // 等待所有请求完成，获取所有坐标
        const locations = await Promise.all(locationPromises);
        // 过滤无效坐标（避免解析失败的情况）
        const validLocations = locations.filter(loc => !isNaN(loc.latitude) && !isNaN(loc.longitude));
        setMarkerLocations(validLocations);

        // 可选：自动调整地图视野以包含所有标记点
        if (validLocations.length > 0) {
          const latitudes = validLocations.map(loc => loc.latitude);
          const longitudes = validLocations.map(loc => loc.longitude);
          const minLat = Math.min(...latitudes);
          const maxLat = Math.max(...latitudes);
          const minLng = Math.min(...longitudes);
          const maxLng = Math.max(...longitudes);

          setCurLoc({
            latitude: (minLat + maxLat) / 2,
            longitude: (minLng + maxLng) / 2,
            latitudeDelta: (maxLat - minLat) * 1.2, // 增加20%边距
            longitudeDelta: (maxLng - minLng) * 1.2,
          });
        }
      } catch (error) {
        console.error('获取坐标失败:', error);
      }
    };

    fetchAllLocations();
  }, [devices]);

  return (
    <View style={styles.container}>
      <MapView style={styles.map} initialRegion={curLoc}>
        {/* 遍历存储的标记点数组渲染Marker */}
        {markerLocations.map((loc, index) => (
          <Marker
            key={index} // 必须添加唯一key
            coordinate={loc}
            pinColor="black"
          />
        ))}
      </MapView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  map: {
    width: '100%',
    height: '100%',
  },
});

关键修改说明 #

1. 新增状态变量：用markerLocations数组存储所有有效标记点坐标，格式符合MapView Marker要求
2. 批量处理API请求：通过Promise.all确保所有请求完成后再更新状态，避免多次setState导致的状态覆盖
3. 修正渲染逻辑：遍历markerLocations数组生成Marker，而非原代码中的ID数组devices
4. 优化地图视野：
   • 初始区域调整为标记点大致中心，确保能看到所有点
   • 可选自动适配逻辑，根据所有标记点经纬度范围动态调整地图区域
5. 错误处理与过滤：过滤无效坐标，避免渲染错误Marker

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