1
エラーが発生しました： "newLatLngBounds（LatLngBounds、int）を使用するとエラーが発生します。レイアウトが発生するまで待つか、地図の寸法を指定できるnewLatLngBounds（LatLngBounds、int、int、int）を使用してください。"newLatLngBounds（LatLngBounds、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 {
\t
\t constructor(props) {
\t \t super(props)
\t \t this.state = {
\t \t \t isMapReady: false,
\t \t \t initialPosition: {
\t \t \t \t longitude: 0,
\t \t \t \t latitude: 0,
\t \t \t \t longitudeDelta: 0,
\t \t \t \t latitudeDelta: 0
\t \t \t },
\t \t \t markerPosition: {
\t \t \t \t longitude: 0,
\t \t \t \t latitude: 0
\t \t \t }
\t \t }
\t }
\t watchID: ?number = null
\t componentDidMount() {
\t \t navigator.geolocation.getCurrentPosition((position) => {
\t \t \t alert(JSON.stringify(position))
\t \t \t var lat = parseFloat(position.coords.latitude)
\t \t \t var long = parseFloat(position.coords.longitude)
\t \t \t var initialRegion = {
\t \t \t \t latitude: lat,
\t \t \t \t longitude: long,
\t \t \t \t latitudeDelta: LATITUDE_DELTA,
\t \t \t \t longitudeDelta: LONGITUDE_DELTA
\t \t \t }
\t \t \t this.setState({initialPosition: initialRegion})
\t \t \t this.setState({markerPosition: initialRegion}) \t \t \t
\t \t },
\t \t (error) => alert(JSON.stringify(error)))
\t \t this.watchID = navigator.geolocation.watchPosition((position) => {
\t \t \t var lat = parseFloat(position.coords.latitude)
\t \t \t var long = parseFloat(position.coords.longitude)
\t \t \t
\t \t \t var lastRegion = {
\t \t \t \t latitude: lat,
\t \t \t \t longitude: long,
\t \t \t \t longitudeDelta: LONGITUDE_DELTA,
\t \t \t \t latitudeDelta: LATITUDE_DELTA
\t \t \t }
\t \t \t this.setState({initialPosition: lastRegion})
\t \t \t this.setState({markerPosition: lastRegion})
\t \t })
\t }
\t componentWillUnmount() {
\t \t navigator.geolocation.clearWatch(this.watchID)
\t }
\t onMapLayout =() => {
this.setState({ isMapReady: true });
}
\t render() {
\t \t return (
\t \t \t <View style={styles.containerStyle}>
\t \t \t \t <MapView style={styles.mapStyle} initialRegion={this.state.initialPosition} onLayout={this.onMapLayout}>
\t \t \t \t \t { this.state.isMapReady &&
\t \t \t \t \t \t <MapView.Marker coordinate={this.state.markerPosition}>
\t \t \t \t \t \t </MapView.Marker>
\t \t \t \t \t }
\t \t \t \t </MapView>
\t \t \t </View>
\t \t \t)
\t }
}
const styles = {
\t containerStyle: {
\t \t flex:1,
\t \t justifyContent: 'center',
\t \t alignItems: 'center',
\t \t backgroundColor: 'lightblue'
\t },
\t mapStyle: {
\t \t left: 0,
\t \t right: 0,
\t \t top: 0,
\t \t bottom: 0,
\t \t position: 'absolute'
\t }
}
export default Map;私は正直に間違って何が起こっているのか見当がつかない...いくつかの助けを本当に感謝！ありがとうございました！！ 1
mapStyle: {
width : SCREEN_WIDTH | SomeValue ,
height : SCREEN_HEIGHT | SomeValue
}