我正在尝试使用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>
);
}
}
我无法找到实际有效的东西,我尝试过的所有示例在测试它们后都无法正常工作。
任何建议将不胜感激!
多个标记的工作示例: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,
},
],
};