当标记放置在不同的位置时，如何阻止谷歌地图重新呈现并只保留输入字段中的值？

Question

我对此做了很多研究，但我没有得到任何解决方案，所以请仔细看看并帮助我，基本上就像当我们通过拖动标记在地图上选择一个位置时，我不希望地图刷新和重置值，也不希望在重新渲染发生后pin回到中心，

我还在shouldcomponentupdate方法中尝试了不同的方法，比如将它返回为false，但在那里map没有重新呈现，我可以从停止的地方拖动pin,我可以在下面的控制台中看到更新的位置，但这些位置的值没有显示在提供的输入字段中！

用简单的话来说，如果我想说，每当我拖放位置上的pin时，位置值必须连续检索，而pin不会回到地图的中心，这样我就可以从我在地图上留下标记pin的地方恢复检索位置。

请帮帮我！！我从网上取了这段代码，我想实现这些变化

import React, { Component } from 'react';
import { withGoogleMap, GoogleMap, withScriptjs, InfoWindow, Marker } from "react-google-maps";
import Geocode from "react-geocode";
import Autocomplete from 'react-google-autocomplete';
Geocode.setApiKey( "AIzaSyDGe5vjL8wBmilLzoJ0jNIwe9SAuH2xS_0" );
Geocode.enableDebug();

class Map extends Component{

constructor( props ){
    super( props );
    this.state = {
        address: '',
        city: '',
        area: '',
        state: '',
        mapPosition: {
            lat: this.props.center.lat,
            lng: this.props.center.lng
        },
        markerPosition: {
            lat: this.props.center.lat,
            lng: this.props.center.lng
        }
    }
}
/**
 * Get the current address from the default map position and set those values in the state
 */
componentDidMount() {
    Geocode.fromLatLng( this.state.mapPosition.lat , this.state.mapPosition.lng ).then(
        response => {
            const address = response.results[0].formatted_address,
                addressArray =  response.results[0].address_components,
                city = this.getCity( addressArray ),
                area = this.getArea( addressArray ),
                state = this.getState( addressArray );

            console.log( 'city', city, area, state );

            this.setState( {
                address: ( address ) ? address : '',
                area: ( area ) ? area : '',
                city: ( city ) ? city : '',
                state: ( state ) ? state : '',
            } )
        },
        error => {
            console.error( error );
        }
    );
};
/**
 * Component should only update ( meaning re-render ), when the user selects the address, or drags the pin
 *
 * @param nextProps
 * @param nextState
 * @return {boolean}
 */


shouldComponentUpdate( nextProps, nextState ){
        if (
            this.state.markerPosition.lat !== this.props.center.lat ||
            this.state.address !== nextState.address ||
            this.state.city !== nextState.city ||
            this.state.area !== nextState.area ||
            this.state.state !== nextState.state
        ) {
            return true
        } else if ( this.props.center.lat === nextProps.center.lat ){
            return false
        }
    }
/**
 * Get the city and set the city input value to the one selected
 *
 * @param addressArray
 * @return {string}
 */
getCity = ( addressArray ) => {
    let city = '';
    for( let i = 0; i < addressArray.length; i++ ) {
        if ( addressArray[ i ].types[0] && 'administrative_area_level_2' === addressArray[ i ].types[0] ) {
            city = addressArray[ i ].long_name;
            return city;
        }
    }
};
/**
 * Get the area and set the area input value to the one selected
 *
 * @param addressArray
 * @return {string}
 */
getArea = ( addressArray ) => {
    let area = '';
    for( let i = 0; i < addressArray.length; i++ ) {
        if ( addressArray[ i ].types[0]  ) {
            for ( let j = 0; j < addressArray[ i ].types.length; j++ ) {
                if ( 'sublocality_level_1' === addressArray[ i ].types[j] || 'locality' === addressArray[ i ].types[j] ) {
                    area = addressArray[ i ].long_name;
                    return area;
                }
            }
        }
    }``
};
/**
 * Get the address and set the address input value to the one selected
 *
 * @param addressArray
 * @return {string}
 */
getState = ( addressArray ) => {
    let state = '';
    for( let i = 0; i < addressArray.length; i++ ) {
        for( let i = 0; i < addressArray.length; i++ ) {
            if ( addressArray[ i ].types[0] && 'administrative_area_level_1' === addressArray[ i ].types[0] ) {
                state = addressArray[ i ].long_name;
                return state;
            }
        }
    }
};
/**
 * And function for city,state and address input
 * @param event
 */
onChange = ( event ) => {
    this.setState({ [event.target.name]: event.target.value });
};
/**
 * This Event triggers when the marker window is closed
 *
 * @param event
 */
onInfoWindowClose = ( event ) => {

};

/**
 * When the marker is dragged you get the lat and long using the functions available from event object.
 * Use geocode to get the address, city, area and state from the lat and lng positions.
 * And then set those values in the state.
 *
 * @param event
 */
onMarkerDragEnd = ( event ) => {
    let newLat = event.latLng.lat(),
        newLng = event.latLng.lng();

    Geocode.fromLatLng( newLat , newLng ).then(
        response => {
            const address = response.results[0].formatted_address,
                addressArray =  response.results[0].address_components,
                city = this.getCity( addressArray ),
                area = this.getArea( addressArray ),
                state = this.getState( addressArray );
            this.setState( {
                address: ( address ) ? address : '',
                area: ( area ) ? area : '',
                city: ( city ) ? city : '',
                state: ( state ) ? state : ''
            } )
        },
        error => {
            console.error(error);
        }
    );
};

/**
 * When the user types an address in the search box
 * @param place
 */
onPlaceSelected = ( place ) => {
    console.log( 'plc', place );
    const address = place.formatted_address,
        addressArray =  place.address_components,
        city = this.getCity( addressArray ),
        area = this.getArea( addressArray ),
        state = this.getState( addressArray ),
        latValue = place.geometry.location.lat(),
        lngValue = place.geometry.location.lng();
    // Set these values in the state.
    this.setState({
        address: ( address ) ? address : '',
        area: ( area ) ? area : '',
        city: ( city ) ? city : '',
        state: ( state ) ? state : '',
        markerPosition: {
            lat: latValue,
            lng: lngValue
        },
        mapPosition: {
            lat: latValue,
            lng: lngValue
        },
    })
};


render(){
    const AsyncMap = withScriptjs(
        withGoogleMap(
            props => (
                <GoogleMap google={ this.props.google }
                           defaultZoom={ this.props.zoom }
                           defaultCenter={{ lat: this.state.mapPosition.lat, lng: this.state.mapPosition.lng }}
                >
                    {/* InfoWindow on top of marker */}
                    <InfoWindow
                        onClose={this.onInfoWindowClose}
                        position={{ lat: ( this.state.markerPosition.lat + 0.0018 ), lng: this.state.markerPosition.lng }}
                    >
                        <div>
                            <span style={{ padding: 0, margin: 0 }}>{ this.state.address }</span>
                        </div>
                    </InfoWindow>
                    {/*Marker*/}
                    <Marker google={this.props.google}
                            name={'Dolores park'}
                            draggable={true}
                            onDragEnd={ this.onMarkerDragEnd }
                            position={{ lat: this.state.markerPosition.lat, lng: this.state.markerPosition.lng }}
                    />
                    <Marker />
                    {/* For Auto complete Search Box */}
                    <Autocomplete
                        style={{
                            width: '100%',
                            height: '40px',
                            paddingLeft: '16px',
                            marginTop: '2px',
                            marginBottom: '100px'
                        }}
                        onPlaceSelected={ this.onPlaceSelected }
                        types={['(regions)']}
                    />
                </GoogleMap>
            )
        )
    );
    let map;
    if( this.props.center.lat !== undefined ) {
        map = <div>
            <div>
                <div className="form-group">
                    <label htmlFor="">City</label>
                    <input type="text" name="city" className="form-control" onChange={ this.onChange } readOnly="readOnly" value={ this.state.city }/>
                </div>
                <div className="form-group">
                    <label htmlFor="">Area</label>
                    <input type="text" name="area" className="form-control" onChange={ this.onChange } readOnly="readOnly" value={ this.state.area }/>
                </div>
                <div className="form-group">
                    <label htmlFor="">State</label>
                    <input type="text" name="state" className="form-control" onChange={ this.onChange } readOnly="readOnly" value={ this.state.state }/>
                </div>
                <div className="form-group">
                    <label htmlFor="">Address</label>
                    <input type="text" name="address" className="form-control" onChange={ this.onChange } readOnly="readOnly" value={ this.state.address }/>
                </div>
            </div>

            <AsyncMap
                googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyDGe5vjL8wBmilLzoJ0jNIwe9SAuH2xS_0&libraries=places"
                loadingElement={
                    <div style={{ height: `100%` }} />
                }
                containerElement={
                    <div style={{ height: this.props.height }} />
                }
                mapElement={
                    <div style={{ height: `100%` }} />
                }
            />
        </div>
    } else {
        map = <div style={{height: this.props.height}} />
    }
    return( map )
}
}

export default Map

Answer 1

当我发现你的问题时，我正在寻找同样问题的解决方案。我知道它晚了，但我的答案会帮助那些即将到达这里的人。shouldComponentUpdate（）方法用于避免不必要的组件呈现。因此，我们必须在此方法中放置条件，以便基于此返回true或false。在您的代码中-替换shouldcomponentupdate方法，如下所示：

    shouldComponentUpdate( nextProps, nextState ){
    if (
    this.state.markerPosition.lat !== this.props.center.lat ||
    this.state.address !== nextState.address 
    ) {
    return false
    } else if ( this.props.center.lat === nextProps.center.lat ){
    return true
    }
}

对我有效。希望能有所帮助。谢谢！