ChargEco/Strides-APP/app/pages/home/maps/Maps1.js

/**
 * 首页地图组件-使用ClusterMap
 * @邠心vbe on 2021/03/18
 */
import React, { useEffect, useRef } from 'react';
import { PROVIDER_GOOGLE } from 'react-native-maps';
import MapView from "react-native-map-clustering";
import { ClusterView, MyCluster, MyMarker } from './Cluster';

export default Maps = ({ region, onMapReady, stopList, onMarkerPress }) => {
  const mapRef = useRef();
  const superClusterRef = useRef();

  useEffect(() => {
    console.log("mapRef", mapRef.current);
    //mapRef.current.animateCamera({ center: region, zoom: 17 }, 500); //移动地图到当前位置并放大
  }, [region])

  /*componentDidMount() {
    this.mapRef = this.ref.current.mapRef ? this.ref.current.mapRef : this.ref.current;
  }*/

  const renderCluster = (props) => {
    //InteractionManager.runAfterInteractions();
    return <MyCluster {...props} key={props.id} onOpen1={latlng => {openClusterMarker(latlng)}}/>
  }

  const openClusterMarker = async (latlng) => {
    var camera = await mapRef.current.getCamera();
    camera.center = latlng
    camera.zoom = camera.zoom + 2
    //console.log('camera', camera);
    mapRef.current.animateCamera(camera, 300);
  }

  getMyCluster = (props) => {
    return <ClusterView id={props.clusterId} pointCount={props.pointCount}/>
  }
  
  const superClusterOptions = {
    minZoom: 1,
    maxZoom: 15,
    radius: 25,
    extent: 512,
    nodeSize: 32
  }

  return (
    <MapView
      ref={mapRef}
      superClusterRef={superClusterRef}
      style={ui.flex1}
      minZoom={10}
      maxZoom={15}
      radius={45}
      extent={512}
      nodeSize={64}
      provider={PROVIDER_GOOGLE}
      onMapReady={onMapReady}
      showsUserLocation={true}
      initialRegion={region}
      renderCluster={(info) => renderCluster(info)}>
      { stopList.map((marker, index) => {
        return (
          <MyMarker
            key={index}
            {...marker}
            coordinate={marker.location}
            onPress={() => onMarkerPress(marker.id)}
          />
        );
      })}
    </MapView>
  );
}