add

Strides-SPAPP/app/pages/home/maps/Cluster.js

@@ -80,7 +80,7 @@ export const MyCluster = (props) => {
       coordinate={location}
       zIndex={20}
       tracksViewChanges={tracksViewChanges}
-      onPress={() => onOpen ? onOpen(location) : onPress()}>
+      onPress={() => onOpen ? onOpen(location, id) : onPress()}>
       <ClusterView 
         pointCount={pointCount} 
         available={available}

Strides-SPAPP/app/pages/home/maps/Maps3.js

@@ -9,7 +9,7 @@ import MapView from "@allisonadam81/react-native-super-clusters";
 import { MyCluster, MyMarker } from './Cluster';
 import VbeClusterMap from 'vbe-cluster-map';
 
-export default Maps3 = ({ region, onMapReady, stopList, useApplesMap, showUserLocation=true, onMarkerPress }) => {
+export default Maps3 = ({ region, onMapReady, stopList, useApplesMap=false, showUserLocation=true, onMarkerPress }) => {
   const mapRef = useRef();
   const superClusterRef = useRef();
 
@@ -19,7 +19,7 @@ export default Maps3 = ({ region, onMapReady, stopList, useApplesMap, showUserLo
       mapRef.current.animateCamera({ center: region, zoom: 17 }, { duration: 500 });
       //mapRef.current.animateCamera({ center: region, zoom: 17 }, 500); //移动地图到当前位置并放大
     } else {
-      if (mapRef.current.moveCamera) {
+      if (mapRef.current?.moveCamera) {
         mapRef.current.moveCamera(region, 17);
         //mapRef.current.showUserLocation();
       }
@@ -58,25 +58,47 @@ export default Maps3 = ({ region, onMapReady, stopList, useApplesMap, showUserLo
         key={props.id}
         location={latlng}
         available={hasAvailableConnector}
-        onOpen1={latlng => openClusterMarker(latlng)}/>
+        onOpen={(latlng, id) => openClusterMarker(latlng, id)}/>
     );
   }
 
-  const openClusterMarker = async (latlng) => {
+  const openClusterMarker = async (latlng, clusterId) => {
     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
+    camera.center = latlng;
+    const currentZoom = camera.zoom;
+    if (currentZoom >= 12) {
+      openClusterMarker2(clusterId);
+      return;
     }
+    let targetZoom = Math.max(currentZoom, 10);
+    let increment = 2 - (targetZoom - 10) * 0.2;
+    targetZoom += increment;
+    camera.zoom = targetZoom;
     console.log('camera', camera);
     mapRef.current.animateCamera(camera, 300);
   }
 
+  const openClusterMarker2 = async (clusterId) => {
+    console.log('openClusterMarker2-start', clusterId);
+    try {
+      const clusterChildren = await superClusterRef.current.getLeaves(clusterId, Infinity, 0); 
+      console.log('openClusterMarker2-child', clusterChildren);
+      const coordinates = clusterChildren.map(m => ({
+        latitude: m.geometry.coordinates[1],
+        longitude: m.geometry.coordinates[0]
+      }));
+      const padding = { top: 50, right: 50, bottom: 50, left: 50 };
+      console.log('openClusterMarker2-end', coordinates);
+      // 放弃手动计算 zoom，让地图自动“框”住这些点
+      mapRef.current.fitToCoordinates(coordinates, {
+        edgePadding: padding,
+        animated: true,
+      });
+    } catch (e) {
+      console.log("openClusterMarker2-err", e)
+    }
+  }
+
   return (
     isIOS
     ? <MapView
@@ -85,9 +107,12 @@ export default Maps3 = ({ region, onMapReady, stopList, useApplesMap, showUserLo
         style={StyleSheet.absoluteFillObject}
         minZoom={5}
         maxZoom={20}
-        radius={45}
-        extent={100}
-        nodeSize={128}
+        radius={$vw(12)}
+        extent={512}
+        nodeSize={64}
+        edgePadding={{top:20, left: 20, right: 20, bottom: 20}}
+        preserveClusterPressBehavior={false}
+        animationEnabled={true}
         showsIndoors={false}
         showsTraffic={false}
         toolbarEnabled={false}