How can I render my markers inside the ClusteredMapView?

问题

I am trying to render the markers inside the component <ClusteredMapView/> but it do not happen, just render the marker with none markers... Bellow some code:

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

here is the renderMarkers function:

renderMarkerS = item =>
this.state.markers.map((marker, index) => {
  console.log('Location picker Marker', coords);
  const coords = {
    location: {
      latitude: JSON.parse(item.latitude),
      longitude: JSON.parse(item.longitude),
    },
  };
  return (
    <Marker
      onPress={this.pickLocationHandler}
      ref={mark => (marker.mark = mark)}
      key={index || Math.random()}
      title={'Parada'}
      description={marker.hora}
      tracksViewChanges={!this.state.initialized}
      {...this.props}
      pinColor={'tomato'}
      coordinate={JSON.parse(item.location)}
      //coordinate={coords}
    >
      {this.props.children}
    </Marker>
  );
});

With:

 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,
      isLoading: false,
    });
  })
  .catch(error => {
    console.error(error);
  });
}


My data is:
 [
{
  "id": "1",
  "location": {
    "latitude": "-29.2433828",
    "longitude": "-51.199249"
  },
  "hora": "03:55:00 PM"
},

Some one can help me?

Here is the intere code to your view: https://snack.expo.io/@matheus_cbrl/clusters

I got the follow error:

Device: (3:18096) No cluster with the specified id.

Device: (3:5314) TypeError: t.props.renderMarker is not a function. (In 't.props.renderMarker(e.properties.item)', 't.props.renderMarker' is undefined)

This error is located at: in e in MyClusteredMapView in RCTView in RCTView in n in n in v in RCTView in RCTView in c Device: TypeError: t.props.renderMarker is not a function. (In 't.props.renderMarker(e.properties.item)', 't.props.renderMarker' is undefined) Prettier Editor Expo

回答1:

renderMarker is a function that render just 1 marker. Besides, you use this.state.data for markers but you didn't update it. You could try below

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);
  });
}

renderCluster = (cluster, onPress) => {
    const pointCount = cluster.pointCount,
        coordinate = cluster.coordinate;
    const clusterId = cluster.clusterId;
    return (
      <Marker key={clusterId} coordinate={coordinate} onPress={onPress}> 
        <View style={styles.myClusterStyle}>
          <Text style={styles.myClusterTextStyle}>
            {pointCount}
          </Text>
        </View>
      </Marker>
    );
};

renderMarker(marker) {
    console.log('Location picker Marker', marker.location);
    const coords = {
      latitude: parseFloat(marker.location.latitude),
      longitude: parseFloat(marker.location.longitude),
    }
    return (
      <Marker
          key={marker.id}
          title={'Parada'}
          description={marker.hora}
          pinColor={'tomato'}
          coordinate={coords}
      />
    );
  }

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

来源：https://stackoverflow.com/questions/59033259/how-can-i-render-my-markers-inside-the-clusteredmapview