“在Android上使用react-native-maps使用newLatLngBounds（LatLngBounds，int）时出错：地图大小不能为零...。”

Question

我收到一个错误：“使用newLatLngBounds（LatLngBounds，int）时出错：地图大小不能为零。最有可能的布局尚未出现在地图视图中。要么等待布局发生，要么使用newLatLngBounds（LatLngBounds（LatLngBounds，int，int） ，int），它允许您指定地图的尺寸​​”。

但是我为getCurrentPosition设置了警报，并且正在从getCurrentPosition（）接收坐标。

import React, { Component } from 'react';
import { View, Dimensions } from 'react-native';
import MapView from 'react-native-maps';


const {width, height} = Dimensions.get('window')

const SCREEN_HEIGHT = height
const SCREEN_WIDTH = width
const ASPECT_RATIO = width / height
const LATITUDE_DELTA = 0.0922
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO


class Map extends Component {
	
	constructor(props) {
		super(props)

		this.state = {
			isMapReady: false,
			initialPosition: {
				longitude: 0,
				latitude: 0,
				longitudeDelta: 0,
				latitudeDelta: 0
			},

			markerPosition: {
				longitude: 0,
				latitude: 0
			}

		}
	}

	watchID: ?number = null

	componentDidMount() {
		navigator.geolocation.getCurrentPosition((position) => {

			alert(JSON.stringify(position))

			var lat = parseFloat(position.coords.latitude)
			var long = parseFloat(position.coords.longitude)

			var initialRegion = {
				latitude: lat,
				longitude: long,
				latitudeDelta: LATITUDE_DELTA,
				longitudeDelta: LONGITUDE_DELTA
			}

			this.setState({initialPosition: initialRegion})
			this.setState({markerPosition: initialRegion})			
		},

		(error) => alert(JSON.stringify(error)))

		this.watchID = navigator.geolocation.watchPosition((position) => {
			var lat = parseFloat(position.coords.latitude)
			var long = parseFloat(position.coords.longitude)
			
			var lastRegion = {
				latitude: lat,
				longitude: long,
				longitudeDelta: LONGITUDE_DELTA,
				latitudeDelta: LATITUDE_DELTA
			}

			this.setState({initialPosition: lastRegion})
			this.setState({markerPosition: lastRegion})
		})

	}

	componentWillUnmount() {
		navigator.geolocation.clearWatch(this.watchID)
	}

	onMapLayout = () => {
    this.setState({ isMapReady: true });
  }

	render() {

		return (

			<View style={styles.containerStyle}>
				<MapView style={styles.mapStyle} initialRegion={this.state.initialPosition} onLayout={this.onMapLayout}>
					{ this.state.isMapReady &&
						<MapView.Marker coordinate={this.state.markerPosition}>
						</MapView.Marker>
					}
				</MapView>
			</View>

			)

	}

}

const styles = {
	containerStyle: {
		flex:1,
		justifyContent: 'center',
		alignItems: 'center',
		backgroundColor: 'lightblue'
	},

	mapStyle: {
		left: 0,
		right: 0,
		top: 0,
		bottom: 0,
		position: 'absolute'
	}

}

export default Map;

老实说，我不知道这是怎么回事...真的很感谢您的帮助！谢谢！！

Answer 1

发生这种情况是因为地图视图尚未初始化。将调用移动到 onMapLoaded 覆盖事件内。在你的

  @Override
    public void onMapReady(GoogleMap googleMap)

添加 ：

googleMap.setOnMapLoadedCallback(new GoogleMap.OnMapLoadedCallback() {
                    @Override
                    public void onMapLoaded() {
                        //Your code where the exception occurred goes here    
                    }
                }); 

Answer 2

我修好了它！因此，我尝试设置mapStyle的宽度和高度，但无法正常工作，更改了API密钥，但仍未显示，尝试向containerStyle添加'flex：1'，但直到我通过实际的高度＆之后，它仍然无法正常工作包含我的地图的容器的宽度值！

Answer 3

在您的地图样式中，您应该提供屏幕宽度和高度或 Flex :1

mapStyle: {
       width : SCREEN_WIDTH | SomeValue ,
       height : SCREEN_HEIGHT | SomeValue 
    }