#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.