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

Question

我正在使用这个名为 React Native Super Cluster 的库在地图上呈现集群标记。如何将从 API 获取并以 redux 状态保存到库的 data prop 的 JSON 数据传递？

data 道具对象必须具有属性 location。我尝试提供给道具的数据具有该属性，但地图仍然无法呈现标记。我尝试使用它可以正常工作的简单本地数组进行试验。当我用 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

How to pass JSON data to react-native-maps-super-cluster

javascript

react-native

react-native-maps