javascript - ¿Cómo mantener un marcador en la parte inferior de la pantalla al hacer zoom como en Google Maps?

Me preguntaba si es posible cambiar el comportamiento predeterminado del zoom, lo predeterminado parece cambiar el viewport en todas las direcciones, pero quiero mantener la parte inferior donde está, y solo redimensionar las otras tres, pitch también es necesario.

Quiero que el marcador mantenga su posición al hacer zoom dentro/fuera como en el primer gif.

La forma en que funciona ahora mismo es que cuando el gesto se detiene, la cámara se anima hacia un nuevo marcador que se genera, porque la cámara sería inestable si tuviera que animarse.

const markerLatLng: LatLng = {latitude: 42.00352792344026, longitude: 21.396884999999997}

const generatedMarker: LatLng = computeDestinationPoint(
  markerLatLng,
  currentDistance,
  currentHeading,
);

mapViewRef.current?.animateCamera(
  {
    center: generatedMarker,
    heading: currentHeading,
    pitch: defaultPitch,
    zoom: currentZoom,
  }
)

Respuesta #1

Usa la propiedad scrollDuringRotateOrZoomEnabled y configúrala en false.

Mientras se usa esta propiedad, el zoom funciona (siempre que la propiedad zoomEnabled sea verdadera, como lo es por defecto) al usar pellizcar y doble toque mientras el centro del mapa permanece igual o cambia valores realmente pequeños.

He utilizado la propiedad onRegionChangeComplete para obtener nuevas coordenadas después de cambiar la región y, a través de eso, actualizar el estado "region" con lat, lng, latDelta, lngDelta. Pero necesito comprobar que el cambio no está por debajo de los valores especificados. Para mi caso de uso, onRegionChangeComplete se dispara dos veces para algunos eventos, por lo que no actualizo "region" varias veces innecesariamente.

Así que haré la siguiente verificación antes de actualizar el cambio de estado de "región",
(marcador=región anterior + información de dirección)

const diff = (a: number, b: number) => (a > b ? a - b : b - a);

const onRegionChange = (newRegion: Region) => {
    if (marker && (
          diff(newRegion.latitude, marker.latitude) > 0.0001) ||
          diff(newRegion.longitude, marker.longitude) > 0.0001)
    ) {
      setRegion(newRegion);
    }
  };

  <MapView
      ref={mapRef}
      region={region}
      scrollDuringRotateOrZoomEnabled={false}
      provider={PROVIDER_GOOGLE}
      style={Styles.MapsStyles.mapView}
      onRegionChangeComplete={e => regionChange(e)}
    />

Editar
Parece que ahora, después de probar, esta propiedad funciona en iOS pero no en Android.