如何在地图上呈现标记列表？

Question

我正在尝试在 RN 中使用 react-native-maps 呈现标记列表。

主要问题是如何获取坐标并使用映射来显示地图中的每个图钉。 下面我发布了到目前为止我尝试过的代码：

const { width, height } = Dimensions.get('window');
const ASPECT_RATIO = width / height;
const LATITUDE = 37.78825;
const LONGITUDE = -122.4324;
const LATITUDE_DELTA = 0.0922;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;
const SPACE = 0.01;
const markerIDs = ['Marker1', 'Marker2', 'Marker3'];

    class map_of_patients extends React.Component {
        constructor(props) {
            super(props);

            this.state = {
                markers: [{
                    a: {
                        latitude: LATITUDE + SPACE,
                        longitude: LONGITUDE + SPACE,
                    },
                    b: {
                        latitude: LATITUDE - SPACE,
                        longitude: LONGITUDE - SPACE,
                    },
                    c: {
                        latitude: LATITUDE - SPACE * 2,
                        longitude: LONGITUDE - SPACE * 2,
                    }
                }]
            };
        }

        componentDidMount() {
            this.focus1();
        }

        focusMap(markers, animated) {
            this.map.fitToSuppliedMarkers(markers, animated);
        }

        focus1() {
            this.focusMap([markerIDs[0], markerIDs[2]], true);
        }

        render() {
            return (
                <View style={styles.container}>
                    <MapView
                        provider={this.props.provider}
                        ref={ref => {
                            this.map = ref;
                        }}
                        style={styles.map}
                        initialRegion={{
                            latitude: LATITUDE,
                            longitude: LONGITUDE,
                            latitudeDelta: LATITUDE_DELTA,
                            longitudeDelta: LONGITUDE_DELTA,
                        }}
                    >
                        {this.state.markers && this.state.markers.map(marker => (
                            <Marker
                                coordinate={marker.latlng}
                                title={marker.title}
                                description={marker.description}
                            />
                        ))}
                    </MapView>
                </View>
            );
        }
    }

我无法找到实际工作的东西，我尝试过的所有示例在我测试后都没有工作。

任何建议都将受到高度赞赏！

Answer 1

多个标记的工作示例： https://github.com/WrathChaos/RN-MultipleMarkerMap-Example

您的州标记图有误。 试试这个：

this.state = {
      markers: [
        {
          latitude: LATITUDE + SPACE,
          longitude: LONGITUDE + SPACE,
        },
        {
          latitude: LATITUDE - SPACE,
          longitude: LONGITUDE - SPACE,
        },
        {
          latitude: LATITUDE - SPACE * 2,
          longitude: LONGITUDE - SPACE * 2,
        },
      ],
    };