如何在ClusteredMapView中渲染标记? [英] How can I render my markers inside the ClusteredMapView?

问题描述

我正在尝试在组件<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}
   />
  );
 }
}

这是renderMarkers函数:

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

使用:

 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"
},

有人可以帮助我吗?

以下是您所需要的代码: https://snack.expo.io/@ matheus_cbrl/clusters

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

我遇到了以下错误:

设备:(3:18096)没有具有指定ID的群集.

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

设备:(3:5314)TypeError:t.props.renderMarker不是函数. (在"t.props.renderMarker(e.properties.item)"中，"t.props.renderMarker"未定义)

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

此错误位于: 在e中 在MyClusteredMapView中 在RCTView中 在RCTView中 客栈 客栈 在v 在RCTView中 在RCTView中 在C 设备:TypeError:t.props.renderMarker不是函数. (在"t.props.renderMarker(e.properties.item)"中，"t.props.renderMarker"未定义) 更漂亮 编辑 世博会

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

推荐答案

renderMarker是仅渲染1个标记的函数.此外，您将this.state.data用于标记，但未更新.您可以在下面尝试

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

这篇关于如何在ClusteredMapView中渲染标记?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！