Я использую fitToSuppliedMarkers()
для своих маркеров, и мне нужно добавить отступы на мою карту. Я безуспешно пытался реализовать это решение. Я не могу использовать fitToCoordinates()
, потому что мне нужно создать маркеры в componentDidMount
, которые этот метод не поддерживает.
Мой код:
<MapView onMapReady = {() => this.mapRef.map.setNativeProps({ padding: 100 })}></MapView>
Этот код дает «setNativeProps не является функцией».
Я также безуспешно пытался использовать свойство mapPadding
, которое существует в документы:
<MapView mapPadding = {{top: 20, right: 20, bottom: 20, left: 20}}></MapView>
Я считаю, что есть проблема с реализацией Android-карт response-native-maps. Я не уверен, но, похоже, это проблема с преобразованием px в dp. Попробуй это:
const padding = Platform.OS === 'android'
? PixelRatio.getPixelSizeForLayoutSize(20)
: 20;
const mapPadding = {top: padding, right: padding, bottom: padding, left: padding};
Если это не сработает, попробуйте установить отступ на 200 и посмотреть, есть ли разница.
Редактировать:
Это точный код, который я успешно использую:
const iosEdgePadding = { top: 100, right: 50, bottom: 300, left: 50 };
const androidEdgePadding = {
top: PixelRatio.getPixelSizeForLayoutSize(iosEdgePadding.top),
right: PixelRatio.getPixelSizeForLayoutSize(iosEdgePadding.right),
bottom: PixelRatio.getPixelSizeForLayoutSize(iosEdgePadding.bottom),
left: PixelRatio.getPixelSizeForLayoutSize(iosEdgePadding.left),
}
const edgePadding = (Platform.OS === 'android') ? androidEdgePadding : iosEdgePadding;
this.refs.map.fitToCoordinates([coordinate1, coordinate2], { edgePadding, animated: true })
Добавлен код, который я использую и должен работать. Убедитесь, что у вас установлена последняя версия react-native-maps :)
Я не могу использовать fitToCoordinates, потому что мои маркеры поступают из запроса, который мне нужно выполнить в componentDidMount, который этот метод не поддерживает.
Спасибо, я попробовал ваше решение, но, к сожалению, оно не сработало. Заполнение не применялось.