Question

我收到错误：＆＃34;使用newLatLngBounds（LatLngBounds，int）时出错：地图大小不能为零。地图视图很可能尚未出现布局。要么等到布局发生，要么使用newLatLngBounds（LatLngBounds，int，int，int），它允许你指定地图的尺寸＆＃34;。

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

＆＃13;

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;

＆＃13;

我不知道说实话会出现什么问题......真的很感激一些帮助！谢谢!!

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密钥，它仍然没有显示，尝试将“flex：1”添加到containerStyle，但它仍然无法工作，直到我通过实际高度和放大器;宽度值到包含我的地图的容器！

Answer 3

在地图样式中，您应该提供屏幕宽度和高度或弹性：1

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

Answer 4

更改Api键。这只是显示功能图的原因。

Answer 5

我进行了很多研究以寻找解决方案以及为什么会发生此错误，但是我没有找到任何正确的答案以了解为什么会发生这种情况，并且我都没有进行低级别的测试以了解实际发生的情况，但是进行了一些测试我意识到该组件需要绝对大小才能接收动画和进行操纵。

因此，为了使地图的尺寸相对于View的尺寸（我的主页），我为MapView创建了一个父容器，该容器灵活，可以填充可用的尺寸，并通过onLayout属性提供一个MapView的绝对大小。

下面是它的工作方式示例：

const [mapViewContainerLayout, setMapViewContainerLayout] = useState<LayoutRectangle>();

<View>
   <MapContainer 
     onLayout={(e: LayoutChangeEvent) => {
        setMapViewContainerLayout(e?.nativeEvent?.layout);
     }}>
     {mapVieContainerLayout && (
         <MapView
            ...
            style={{ 
              width: mapViewContainerLayout?.width,
              height: mapViewContainerLayout?.height
            }}
            ...
         </MapView>
     )}
   </MapContainer>
</View>

Answer 6

我遇到了同样的问题，flex: 1 出现错误，所以我设置了固定的 width: 和 height:。但这仍然不理想我真的需要 flex 的灵活性：1.最后我让它工作并通过使用 minHeight: 而不是高度来保留 flex 的使用：

{
  minHeight: Dimensions.get("window").height - APPROX_HEIGHT_OF_OTHER_ELEMENTS,
  flex: 1,
}

Answer 7

我使用onMapReady策略修复了该问题，每当渲染polyline或markers时，请确保已加载MapView。

原因：
准备好 MapView 后，渲染标记。

const { width, height } = Dimensions.get("window");
    class Map extends Component {
    constructor(props) {
        super(props);
        this.state = {
          isMapReady: false
        };
      }
     onMapLayout = () => {
        this.setState({ isMapReady: true });
      };

    render(){
    return(
        <MapView
                  initialRegion={{
                    latitude:"your lat" ,
                    longitude:"your lng" ,
                    latitudeDelta: 0.0922,
                    longitudeDelta: 0.0421
                  }}
                  onMapReady={this.onMapLayout}
                  provider={PROVIDER_GOOGLE}
                  loadingIndicatorColor="#e21d1d"
                  ref={map => (this.map = map)}
                  style={{
                    width,
                    height,
                  }}
                  loadingEnabled={true}
                >
     {this.state.isMapReady && <MapView.Marker
            key="your key"
            identifier="marker"
            coordinate={{
              latitude: "lat",
              longitude: "lng"
            }}
            flat={true}
            anchor={anchor}
            image={image}
          />
         }
          </MapView>
         );
      }
    }

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

7 个答案: