Question

我正在使用一个名为React Native Super Cluster的库来在地图上渲染群集标记。如何将从API提取并以redux状态保存的JSON数据传递给库的data属性？

data道具对象必须具有属性location。我尝试提供道具的数据具有该属性，但是map无法渲染标记。我尝试使用简单的本地数组进行实验，没有问题。当我使用react-native-maps渲染所有API位置的标记时，它们也会显示在地图上。

以下是来自API的示例响应：

[
  {
    "id": "string",
    "name": "string",
    "location": {
      "type": "Point",
      "coordinates": [
        -122,
        37
      ]
    },
]

我这样做的方式可能是错误的：

<ClusteredMapView
  style={{ flex: 1 }}
  data={this.props.stations}
  renderMarker={this.renderMarker.bind(this)}
  renderCluster={this.renderCluster.bind(this)}
  initialRegion={INIT_REGION}
/>

renderMarker和renderCluster函数不会被调用，因为数据道具收到无效的数据类型。

Answer 1

回答我自己的问题。

经过一些研究并深入研究了库的源代码，我发现location属性必须以location: {lat, long}的形式提供。换句话说，它应该由库直接访问。因此，我从JSON对象中提取了每个值，并将其分配给location。

我不确定这样做的效率如何，如果比这更优雅，更直接，请添加您自己的答案：

  _convertPoints(data) {
    const results = {
      type: 'MapCollection',
      features: []
    };
    data.map(value => {
      array = {
        value,
        location: {
          latitude: value.location.coordinates[1],
          longitude: value.location.coordinates[0]
        }
      };
      results.features.push(array);
    });
    return results.features;
  }

渲染：

  render() {
    const data = this._convertPoints(this.props.stations);
    return (
      <View style={styles.container} style={{ flex: 1 }}>
        <ClusteredMapView
          style={{ flex: 1 }}
          data={data}
          renderMarker={this.renderMarker.bind(this)}
          renderCluster={this.renderCluster.bind(this)}
          initialRegion={INIT_REGION}
        />
      </View>
    );
  }

经过这些操作之后，它似乎可以正常工作。希望当我自定义地图时，一切都会好的:)

如何将JSON数据传递给react-native-maps-super-cluster

1 个答案: