ChargEco/Strides-SPAPP/app/pages/home/maps/Maps.js

import React, { useEffect, useRef } from 'react';
import { PROVIDER_DEFAULT, PROVIDER_GOOGLE } from 'react-native-maps';
import MapView from "@allisonadam81/react-native-super-clusters";
//import Maps1 from './Maps1'
import Maps2 from './Maps2'
import Maps3 from './Maps3'
import { MyCluster, MyMarker } from './Cluster';
import { StyleSheet } from 'react-native';

const MapOnly= React.memo(({
  ready=false,
  region, onMapReady, stopList, useApplesMap, showUserLocation=true, onMarkerPress
}) => {
  const mapRef = useRef();
  const superClusterRef = useRef();
  useEffect(() => {
    console.log("MapOnly useEffect", "地图初始化");
    if (mapRef?.current) {
    //mapRef.current.animateToRegion(region, 500);
      mapRef.current.animateCamera({ center: region, zoom: 17 }, { duration: 500 }); //移动地图到当前位置并放大
    }
  }, [region])

  const renderCluster = (props) => {
    //console.log("renderCluster", props);
    let hasAvailableConnector = false;
    if (props.geometry.hasAvailableConnector === undefined) {
      if (superClusterRef) {
        const points = superClusterRef.current.getLeaves(props.id, Infinity, 0);
        if (points) {
          for (let index = 0; index < points.length; index++) {
            const point = points[index];
            if (point.properties.coordinate?.available) {
              hasAvailableConnector = true;
              break;
            }
          }
        }
      }
    } else {
      hasAvailableConnector = props.geometry.hasAvailableConnector
    }
    props.geometry.hasAvailableConnector = hasAvailableConnector;
    const latlng = {latitude: props.geometry.coordinates[1], longitude: props.geometry.coordinates[0]}
    //InteractionManager.runAfterInteractions();
    return (
      <MyCluster
        {...props}
        key={props.id}
        location={latlng}
        available={hasAvailableConnector}
        onOpen={latlng => openClusterMarker(latlng)}/>
    );
  }

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

  return (
    <MapView
      ref={mapRef}
      superClusterRef={superClusterRef}
      style={StyleSheet.absoluteFillObject}
      minZoom={5}
      maxZoom={20}
      radius={45}
      extent={100}
      nodeSize={128}
      showsIndoors={false}
      showsTraffic={false}
      toolbarEnabled={false}
      initialRegion={region}
      tintColor={colorAccent}
      onMapReady={onMapReady}
      poiClickEnabled={false}
      zoomControlEnabled={false}
      tracksViewChanges={true}
      showsMyLocationButton={!ready}
      showsIndoorLevelPicker={false}
      showsUserLocation={showUserLocation}
      followsUserLocation={showUserLocation}
      renderCluster={info => renderCluster(info)}
      provider={useApplesMap ? PROVIDER_DEFAULT : PROVIDER_GOOGLE}>
      { stopList.map((marker, index) => {
        return (
          <MyMarker
            key={index}
            id={marker.id}
            coordinate={marker}
            onPress={() => onMarkerPress(marker.id)}
          />
        );
      })}
    </MapView>
  );
});


export default {
  Maps1: Maps2,
  Maps2: Maps2,
  Maps3: Maps3,
  MapOnly: MapOnly
}