如何在React Native Map中一次性显示3个经纬度标记？

问题说明 #

拥有三组经纬度数据：

const result= [[112.30021, 5.5680028],[113.30021, 4.5680028],[114.30021, 3.5680028]]

需要通过react-native-maps在同一屏幕显示所有标记，此前单个标记也无法正常显示。

问题原因分析 #

你之前的代码中，地图初始区域设置的经度116.9087与目标标记的经度（112-114区间）偏差过大，导致标记超出了初始视野范围，所以看不到标记。

解决方案代码 #

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

const result = [[112.30021, 5.5680028],[113.30021, 4.5680028],[114.30021, 3.5680028]];

export default function MapScreen() {
  // 转换经纬度格式，适配Marker的坐标要求
  const markers = result.map(([longitude, latitude], index) => ({
    id: `${index}`,
    latitude,
    longitude,
  }));

  return (
    <View style={styles.container}>
      <MapView
        style={styles.map}
        // 可选：设置一个覆盖所有标记的初始区域，配合fitToCoordinates自动调整
        initialRegion={{
          latitude: 4.5680028,
          longitude: 113.30021,
          latitudeDelta: 2,
          longitudeDelta: 2,
        }}
        // 自动调整地图视野，包含所有标记
        fitToCoordinates={markers}
        fitToOptions={{
          edgePadding: { top: 50, right: 50, bottom: 50, left: 50 },
          animated: true,
        }}
      >
        {/* 遍历生成所有标记 */}
        {markers.map(marker => (
          <Marker
            key={marker.id}
            coordinate={{
              latitude: marker.latitude,
              longitude: marker.longitude,
            }}
          />
        ))}
      </MapView>
    </View>
  );
}

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

关键要点 #

• 经纬度对应：你的数据格式是[经度, 纬度]，需要正确赋值给Marker的coordinate属性
• 视野适配：使用fitToCoordinates让地图自动调整范围，确保所有标记都显示在屏幕内，edgePadding用于避免标记贴边
• 唯一key：列表渲染Marker时必须设置唯一的key属性，符合React的渲染要求
• 初始区域修正：如果不使用fitToCoordinates，需要手动设置包含所有标记的初始区域，避免标记超出视野

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