Как сохранить маркер в нижней части экрана при масштабировании, как на картах Google?

#javascript #typescript #react-native #google-maps #react-native-maps

#javascript #typescript #react-native #google-карты #react-native-maps

Вопрос:

Мне было интересно, можно ли изменить масштабирование поведения по умолчанию, по умолчанию, похоже, изменяется viewport во всех направлениях, но я хочу сохранить нижнюю часть там, где она есть, и также необходимо изменить размер только трех других pitch .

введите описание изображения здесь
введите описание изображения здесь

Я хочу, чтобы маркер сохранял свое положение при увеличении / уменьшении масштаба, как в первом gif .

Сейчас это работает так: когда жест останавливается, камера анимируется на новый маркер, который генерируется, потому что камера для была бы глючной, если бы она анимировалась.

 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,
  }
)
 

Ответ №1:

Используйте prop scrollDuringRotateOrZoomEnabled и установите для него значение false.

При использовании этого prop zoom работает (пока значение prop с изменяемым масштабированием равно true, как и по умолчанию) с помощью пинча и двойного нажатия, в то время как центр карты остается неизменным или меняет очень маленькие значения.

Я использовал onRegionChangeComplete prop, чтобы получить новые координаты после изменения региона и через это обновить состояние «регион» с помощью lat, lng, latDelta, lngDelta. Но мне нужно проверить, что изменение не соответствует указанным значениям. Для моего варианта использования onRegionChangeComplete срабатывает дважды для некоторых событий, поэтому я не обновляю «регион» несколько раз без необходимости.

Поэтому я сделаю следующую проверку перед обновлением изменения состояния «регион»
(маркер = предыдущий регион адресная информация)

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

const onRegionChange = (newRegion: Region) => {
    if (marker amp;amp; (
          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)}
    />
 

Редактировать
Теперь, после тестирования, кажется, что эта поддержка работает на iOS, но не на Android.