我有一个错误："使用newlatlngbounds（latlngbounds，int）错误的错误：地图大小不能为零。映射视图尚未发生布局。要么等到出现布局或使用newlatlngbounds（latlngbounds，int，int，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;我不知道说实话会有什么问题...真的很感谢您的帮助！谢谢！
这发生了，因为映射视图尚未初始化。将呼叫移至Onmaploaded Overriden事件中。在您的
中 @Override
public void onMapReady(GoogleMap googleMap)
add：
googleMap.setOnMapLoadedCallback(new GoogleMap.OnMapLoadedCallback() {
@Override
public void onMapLoaded() {
//Your code where the exception occurred goes here
}
});
我修复了它！因此，我尝试设置MapStyle的宽度和高度，但它不起作用，更改了API键，并且它仍然没有出现，尝试将" Flex：1"添加到ContainerStyle中，但是直到我通过了实际的高度＆AMP，它仍然无法正常工作。;包含我地图的容器的宽度值！
在您的地图样式中您应该提供屏幕宽度和高度或挠性：1
mapStyle: {
width : SCREEN_WIDTH | SomeValue ,
height : SCREEN_HEIGHT | SomeValue
}
我使用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>
);
}
}
我研究了很多寻找解决方案以及为什么发生错误的原因，但是我没有找到任何正确的答案真正发生的事情，但是通过一些测试，我意识到该组件需要绝对的大小才能接收动画并被操纵。
因此，为了保持地图的大小相对于视图的大小（我的主页），我为MapView创建了一个柔性的父容器，请填充可用大小，并通过on Laylayout属性提供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>
我遇到了同样的问题，而flex: 1我遇到了错误，因此我设置了固定的width:和height:。但这仍然不是理想的，我真的需要灵活的灵活性：1。最终我通过使用minHeight:而不是高度来保留它并保留了flex的使用：
{
minHeight: Dimensions.get("window").height - APPROX_HEIGHT_OF_OTHER_ELEMENTS,
flex: 1,
}
更改API键。这只是显示功能图的原因。
在科特林（Kotlin）中似乎有效：
map.setOnMapLoadedCallback {
map.moveCamera(CameraUpdateFactory.newLatLngBounds(cameraBounds, 0))
}
我有一个scrollview作为父级组件，这给出了问题，除非我给出身高，否则将无法使用，但是删除parent scrollview现在可以与flex完美搭配：1
如果您使用的是rawbottomsheet，则需要在mapview样式中与原始底表相等，即
<MapView
onPress={e => handleMapMarker(e.nativeEvent.coordinate)}
showsUserLocation={true}
showsIndoorLevelPicker={false}
showsBuildings={false}
ref={mapView}
provider={PROVIDER_GOOGLE}
customMapStyle={mapStyle}
initialRegion={region}
region={region}
onMapReady={handleMap}
loadingEnabled={true}
loadingIndicatorColor="#e21d1d"
// showsMyLocationButton={true}
style={{
flex: 1,
minHeight: height * 0.8,
}}>
{isMapReady && (
<MarkerComp
setMarker={setMarker}
coordinate={{...marker}}
handleMapMarker={handleMapMarker}
/>
)}
</MapView>
等到准备就绪映射布局：
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
mapView = findViewById(R.id.mapGoogle) as? MapView
mapView?.onCreate(savedInstanceState)
mapView?.getMapAsync(this)
}
override fun onMapReady(googleMap: GoogleMap) {
// wait for map layout ready
mapView?.post {
drawRoute(googleMap) //todo make some with your map
}
}
方法iSmapready为我工作！
＆lt; mapview
style={{ height: 100, width: 120, borderWidth: 1 }}
zoomEnabled={false}
scrollEnabled={false}
onLayout={this.onMapLayout}
initialRegion={{
latitude,
longitude,
latitudeDelta: 0.04,
longitudeDelta: 0.04,
}}>
{isMapReady &&
<Marker coordinate={{ latitude, longitude }} />
}
</MapView>
`