簇刚刚出现,就好像没有动画一样。我正在iOS模拟器和iOS设备中对此进行测试。我假设react-native-maps-super-cluster开箱即用。 (类似于README中的demo gif),我要做的就是添加animateClusters={true}
。如果我错了,请纠正我。
{(this.state.initialPosition!=null && this.state.arr.length > 0)?
<ClusteredMapView
provider={PROVIDER_GOOGLE}
style={styles.mapContainer}
data={this.state.clusterDataArray}
renderMarker={this.renderMarker}
renderCluster={this.renderCluster}
initialRegion={this.state.initialPosition}
ref={(element) => { this.mapRef = element }}
showsUserLocation = {true}
showsMyLocationButton={false}
customMapStyle={CustomMapStyle}
loadingEnabled={true}
rotateEnabled={true}
onRegionChangeComplete={this.onRegionChangeComplete}
>
</ClusteredMapView>
:
null}
renderCluster = (cluster, onPress) => {
const pointCount = cluster.pointCount,
coordinate = cluster.coordinate,
clusterId = cluster.clusterId
return (
<MapView.Marker coordinate={coordinate} onPress={onPress} animateClusters={true}>
<View style={styles.clusterContainer}>
<Text style={styles.clusterText}>
{pointCount}
</Text>
</View>
</MapView.Marker>
)
}
renderMarker = (arrData) => {
return (
<MapView.Marker
image={require('../../icons/blue-marker-pin.png')}
identifier={(arrData.id).toString()}
key={(arrData.id).toString()}
coordinate={arrData.location}
/>
)
}