我如何在ClusteredMapView中渲染标记？

Question

我正在尝试在组件<ClusteredMapView/>内渲染标记，但不会发生，只渲染没有标记的标记...下面是一些代码：

render() {
 return (
  <ClusteredMapView
    style={{ flex: 1 }}
    data={this.state.data}
    initialRegion={INIT_REGION}
    ref={r => {
      this.map = r;
    }}
    renderMarkerS={this.renderMarkerS}
    renderCluster={this.renderCluster}
   />
  );
 }
}

这是renderMarkers函数：

renderMarkerS = data =>
this.state.markers.map((data, index) => {
  const coords = {
    latitude: JSON.parse(data.latitude),
    longitude: JSON.parse(data.longitude),
  };
  return (
    <Marker
      onPress={this.pickLocationHandler}
      ref={mark => (data.mark = mark)}
      key={index || Math.random()}
      title={'Parada'}
      description={data.hora}
      coordinate={coords}
    />
  );
});

使用：

 componentDidMount() {
return fetch(
  'https://gist.githubusercontent.com/MatheusCbrl/bba7db1c0dbc68be2f26d5c7e15649b6/raw/0fab4ea3b493dcd15e95f172cd0a251724efbc45/ParadasDiurno.json'
)
  .then(response => response.json())
  .then(responseJson => {
    // just setState here e.g.
    this.setState({
      markers: responseJson,
      isLoading: false,
    });
  })
  .catch(error => {
    console.error(error);
  });
}

有人可以帮助我吗？这是您要查看的代码：https://snack.expo.io/@matheus_cbrl/clusters

Answer 1

renderMarker是仅渲染1个标记的函数。此外，您将this.state.data用于标记，但我不对其进行更新。您可以在下面尝试（尚未测试）

componentDidMount() {
  return fetch(
  'https://gist.githubusercontent.com/MatheusCbrl/bba7db1c0dbc68be2f26d5c7e15649b6/raw/0fab4ea3b493dcd15e95f172cd0a251724efbc45/ParadasDiurno.json'
)
  .then(response => response.json())
  .then(responseJson => {
    // just setState here e.g.
    this.setState({
      data: responseJson,      <-- update here
      isLoading: false,
    });
  })
  .catch(error => {
    console.error(error);
  });
}

renderMarkerS = item =>
  const coords = {
    latitude: JSON.parse(item.latitude),
    longitude: JSON.parse(item.longitude),
  };
  return (
    <Marker
      onPress={this.pickLocationHandler}
      key={index || Math.random()}
      title={'Parada'}
      description={item.hora}
      coordinate={coords}
    />
  );
});