反应本机地图 MapView 区域未在 MarkerDrag 上更新

Question

我正在尝试在 React Native 中实现搜索和精确定位位置。我正在使用 react-native-maps 和 react-native-google-places-autocomplete 包，因为它们有明显的用途。
首先，我在该州启动了区域：

   constructor(){
    this.state={
         mapRegion: {
                        latitude: this.props.latitude ? this.props.latitude : 27.7172,
                        longitude: this.props.longitude ? this.props.longitude : 85.3240,
                        latitudeDelta: 0.005,
                        longitudeDelta: 0.005,
                    },
    }
    }

我尝试在按下自动完成的搜索结果以及拖动标记时更新区域。但是我得到一个错误：

Error: You attempted to set the key latitude with the value '27' on an object that is meant to be immutable and has been frozen.

我将代码实现为：

               <GooglePlacesAutocomplete
                            placeholder='Search'
                            fetchDetails={true}
                            onPress={(data, details = null) => {
                                let tempMapRegion = this.state.mapRegion;
                                tempMapRegion.latitude = details.geometry.location.lat;
                                tempMapRegion.longitude = details.geometry.location.lng;
                                this.setState({ mapRegion: tempMapRegion })
                            }}
                            query={{
                                key: AppSettings.googleMapApiKey,
                                language: 'en',
                            }}
                        />
                        <MapView
                            initialRegion={{
                                latitude: this.props.latitude ? this.props.latitude : 27.7172,
                                longitude: this.props.longitude ? this.props.longitude : 85.3240,
                                latitudeDelta: 0.005,
                                longitudeDelta: 0.005,
                            }}
                            region={this.state.mapRegion}
                            onRegionChange={(e) => { this.onRegionChange(e) }}
                            style={{ height: 300, width: 300 }}
                        >
                            <Marker draggable
                                coordinate={this.state.mapRegion}
                                onDragEnd={(e) => {
                                    let tempMapRegion = this.state.mapRegion;
                                    tempMapRegion.latitude = e.nativeEvent.coordinate.latitude
                                    tempMapRegion.longitude = e.nativeEvent.coordinate.longitude
                                    this.setState({ mapRegion: tempMapRegion })
                                }}
                            />
                        </MapView>

MapView中的onRegionChange运行顺利，自动将marker拖到中间，反之则出现上述错误。

是什么导致了这个错误，我该如何解决这个问题？

Answer 1

<View style={{ padding: 2, }}>
                            <GooglePlacesAutocomplete
                                placeholder='Search'
                                fetchDetails={true}
                                onPress={(data, details = null) => {
                                    let tempMapRegion = this.state.mapRegion;
                                    tempMapRegion.latitude = details.geometry.location.lat;
                                    tempMapRegion.longitude = details.geometry.location.lng;
                                    this.map.animateToRegion(this.newRegion(tempMapRegion));
                                    this.setState({ address: data.description })

                                }}
                                query={{
                                    key: AppSettings.googleMapApiKey,
                                    language: 'en',
                                }}
                            />
                        </View>
                        <MapView
                            provider={this.props.provider}
                            ref={ref => { this.map = ref; }}
                            mapType={MAP_TYPES.TERRAIN}
                            initialRegion={this.state.mapRegion}
                            onRegionChangeComplete={(e) => { this.onRegionChange(e) }}
                            style={{ height: width, width: width, marginTop: -5 }}
                        >
                            <Marker draggable
                                coordinate={this.state.mapRegion}
                                onDragEnd={(e) => {
                                    let tempMapRegion = this.state.mapRegion;
                                    tempMapRegion.latitude = e.nativeEvent.coordinate.latitude
                                    tempMapRegion.longitude = e.nativeEvent.coordinate.longitude
                                    this.map.animateToRegion(this.newRegion(tempMapRegion));
                                    // this.setState({ mapRegion: tempMapRegion })
                                }}
                            />
                        </MapView>

所以，基本上做这件事的是使用地图视图的 animateToRegion 属性。它基本上将视图动画化到提到的区域，然后调用 onRegionChange。我已经多次偶然发现这个答案，但它没有用。奇怪的是，这只在构建版本中有效，在调试时无效，至少在模拟器上无效。

感谢这个答案，但它指明了方向。

   newRegion(tempMapRegion) {
        return {
            ...this.state.mapRegion,
            ...this.regionCoordinate(tempMapRegion),
        };
    }

    regionCoordinate(tempMapRegion) {
        return {
            latitude: tempMapRegion.latitude,
            longitude: tempMapRegion.longitude,
        };
    }

反应本机地图 MapView 区域未在 MarkerDrag 上更新

React native maps MapView Region not updating on MarkerDrag

google-maps

react-native

react-native-maps