web-dev-qa-db-ja.com

「newLatLngBounds（LatLngBounds、int）の使用エラー：マップサイズをゼロにすることはできません...」Android

エラーが発生します： "newLatLngBounds（LatLngBounds、int）の使用エラー：マップサイズをゼロにすることはできません。マップビューのレイアウトがまだ発生していない可能性があります。レイアウトが発生するまで待つか、newLatLngBounds（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;

正直に言うと何が悪いのかわかりません...本当に助けていただければ幸いです！ありがとうございました！！

androidreactjsreact-nativereact-native-androidreact-native-maps
6
raph

それを私が直した！そこで、mapStyleの幅と高さを設定しようとしましたが、機能せず、APIキーを変更しましたが、それでも表示されませんでした。containerStyleに「flex：1」を追加しようとしましたが、実際の高さを渡すまで機能しませんでした。マップを含むコンテナーへの幅の値！

5
raph

マップスタイルでは、画面の幅と高さ、またはフレックスを指定する必要があります：1

mapStyle: {
       width : SCREEN_WIDTH | SomeValue ,
       height : SCREEN_HEIGHT | SomeValue 
    }
2
Syed Zain Ali

これは、マップビューがまだ初期化されていないために発生します。 onMapLoadedオーバーライドイベント内に呼び出しを移動します。あなたの中で

  @Override
    public void onMapReady(GoogleMap googleMap)

追加 ：

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

APIキーを変更します。それだけが機能マップを表示する理由です。

0
pawan soni

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>
         );
      }
    }
0
Syed Zain Ali