Is there a way to limit the map to a specific area so that panning and zooming is contained inside that area and everything outside is locked away? I would like to limit what area the user can see on the map. I am using Google Maps via react-native-maps https://github.com/react-community/react-native-maps
and this is my code and currently there is no limit on how far out you can zoom or how much you can pan to either side
<View style={styles.container}>
<MapView style={styles.map}
provider= { PROVIDER_GOOGLE }
customMapStyle={mapStyle}
initialRegion={{
latitude: 59.2937025,
longitude: 18.0813377,
latitudeDelta: 0.012,
longitudeDelta: 0.012,
}}
/>
</View>
The solution TyBourque submitted worked. A bit more of a complicated anwser, you can use the maxZoomLevel prop to limit the zoom. Then you will need to use the event onPanDrag and need to check if the { coordinate: LatLng, position: Point } is within the bounds and if it is not within the bounds reset it to the previous valid location.
来源:https://stackoverflow.com/questions/49923304/react-native-maps-limit-panning-area