Question

我有两个屏幕，每个屏幕都有自己的MapView，可从两个单独的API源中获取。一个抓取用户提交的标记，另一个抓取我添加的另一个数据库中的标记。我正在尝试在地图上添加两个数据源，以便用户能够（通过无线电输入）选择是否要从我的数据库中查看用户提交的标记或“管理员”标记。

这两个地图均显示其适当的标记，因此我的API数据有效，我只是不知道如何将其组合到一张地图中，用户可以选择要查看的标记类型。

UserMap.js-用户提交的标记屏幕：

  componentDidMount() {
    this.fetchData()
  }

  constructor(props) {
    super(props);
    this.state = {
      posts: []
    };
  }

  fetchData = () => {
axios
    .get('user-submitted-markers-api')
    .then(response => {
      this.setState({
        posts: response.data
      });

    });
  };


  render() {
    return (
      <View style={styles.container}>


  <MapView style={styles.map}
          initialRegion={{
              latitude: 43.601150,
              longitude: -79.822725,
              latitudeDelta: 0.04,
              longitudeDelta: 0.05,
          }}
        >

{this.state.posts.map((user, index)=> {
return (

<MapView.Marker key={user.id} coordinate={{latitude:user.lat, longitude: user.lng}} title={user.title.rendered} />

);
})}
      </MapView>

    </View>
    );
  }
}

CustomMap.js（由我手动添加）标记：

  componentDidMount() {
    this.fetchData()
  }

  constructor(props) {
    super(props);
    this.state = {
      customMarkers: []
    };
  }

  fetchData = () => {
axios
    .get('my-custom-markers-API')
    .then(response => {
      this.setState({
        customMarkers: response.data
      });

    });
  };


  render() {
    return (
      <View style={styles.container}>


  <MapView style={styles.map}
          initialRegion={{
              latitude: 43.601150,
              longitude: -79.822725,
              latitudeDelta: 0.04,
              longitudeDelta: 0.05,
          }}
        >

{this.state.customMarkers.map((custom, index)=> {
return (

<MapView.Marker key={custom.id} coordinate={{latitude:custom.lat, longitude: custom.lng}} title={custom.title} />

);
})}
      </MapView>

    </View>
    );
  }
}

过滤MapView标记类型

0 个答案: