我遇到了一个错误:
"Error using newLatLngBounds(LatLngBounds, int): Map size can't be zero. Most likely layout has not yet occured for the map view. Either wait until layout has occurred or use newLatLngBounds(LatLngBounds, int, int, int) which allows you to specify the map's dimensions".
但是我已经设置了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;
老实说,我不知道出了什么问题......真的很感激您的帮助!谢谢!