react-native-map-clustering

react-native-map-clustering copied to clipboard

Thank you for serving nice lib.

I'm making something like the Google MAP. It has features below.

• print POIS(points of interest)
• print clustering POIS's number

Problem

The POIS move When I scroll the map.

<MapView
      provider={PROVIDER_GOOGLE}
      initialRegion={{
        ...myLocation,
        ...zoomLevel,
      }}
      zoomEnabled={true}
      renderCluster={_renderCluster}
      onRegionChangeComplete={async (regionCurrent) => {
        setCurrentRegion(regionCurrent);
      }}
      onTouchStart={() => setIsShowCarousel(false)}
>
      {searchResult.map((data) => _renderMarker(data))}
</MapView>

const _renderMarker = (data) => {
      const lat = data.location_latitude;
      const long = data.location_longitude;

      return (
        <Marker
          key={data.store_id}
          identifier={`${PREFIX_MARKER_ID}-${data.store_id}`}
          coordinate={{
            latitude: lat,
            longitude: long,
          }}
          style={{width: 32, height: 32}}
          onPress={() => _onPressMarker(data)}>
             <Image
               source={{uri: props.img}}
               style={{width: 32, height: 32}}
               resizeMode="contain"
             />
        </Marker>
      );
}

const _renderCluster = (cluster) => {
    const {id, geometry, onPress, properties} = cluster;
    const points = properties.point_count;

    return (
      <Marker
        key={id}
        coordinate={{
          longitude: geometry.coordinates[0],
          latitude: geometry.coordinates[1],
        }}
        onPress={() => {
          onPress();
          setZoomLevel({
            latitudeDelta: 0.0005,
            longitudeDelta: 0.0005,
          });
        }}>
        <View style={styles.mapCluster}>
          <Text style={styles.mapClusterText}>{points}</Text>
        </View>
      </Marker>
    );
  };

Up