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

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,
},
],
};