Как динамически установить режим перемещения API-интерфейсов Google в ReactionJS? - PullRequest
Новая
       39

Как динамически установить режим перемещения API-интерфейсов Google в ReactionJS?

0 голосов
/ 30 декабря 2018

Я пытаюсь динамически обновить режим движения в зависимости от выбранных переключателей.

Я прочитал документацию по направлениям API и попробовал следующее. 

class Transport extends React.Component {
  state={
    origin: '',
    destination: '',
    directions: '',
    mode: 'DRIVING'
  }

  setDirections(){
    const DirectionsService = new google.maps.DirectionsService();

      DirectionsService.route({
        origin: this.state.origin,
        destination: this.state.destination,
        travelMode: google.maps.TravelMode[this.state.mode]
      }, (result, status) => {
        if (status === google.maps.DirectionsStatus.OK) {
          this.setState({
            directions: result,
          });
        } else {
          console.error(`error fetching directions ${result}`);
          alert('Selected mode of transport is not available for the for the trip!');
        }
      });
  }

  showPlaceDetails(place) {
    let destination = sessionStorage.getItem('city');
    destination=destination.replace(/\+/g, ' ');
    console.log(destination);
    let origin = place.address_components[0].long_name.toString();
    try{
        origin+= ' ' + place.address_components[2].long_name.toString();
    }catch(e){}
    console.log(origin);

    this.setState(() => ({origin, destination}));

    this.setDirections();
}

onModeChange = (e) =>{
  const mode = e.target.value;
  console.log(mode);

  this.setState(() => ({mode}));

  this.setDirections();
}

   render() {
   const GoogleMapExample = withGoogleMap(props => (
      <GoogleMap
        defaultCenter = { { lat: 40.756795, lng: -73.954298 } }
        defaultZoom = { 13 }
      >
      {this.state.directions && <DirectionsRenderer directions={this.state.directions} />}
      </GoogleMap>
   ));
   return(
      <div>
        <div className='travel-details-container'>
          <div>
            <CitySuggestionBar onPlaceChanged={this.showPlaceDetails.bind(this)} />
            <div>
            <label htmlFor="driving">Driving</label>
            <input type="radio" name="transport-type" id="driving" value="DRIVING" 
            onChange={this.onModeChange} defaultChecked />
            <label htmlFor="transit">Bus/Train</label>
            <input type="radio" name="transport-type" id="transit" value="TRANSIT"
            onChange={this.onModeChange} />
            <label htmlFor="air">Airways</label>
            <input type="radio" name="transport-type" id="air" value="AIRWAYS"
            onChange={this.onModeChange} />
          </div>
          </div>
        </div>
        <GoogleMapExample
          containerElement={ <div style={{ height: `500px`, width: '100%' }} /> }
          mapElement={ <div style={{ height: `100%` }} /> }
        />
      </div>
   );
   }
};

Iустановили режим по умолчанию на ДРАЙВИНГ в состоянии, и радио по умолчанию, отмеченное также ДРАЙВИНГ.Тем не менее, когда я меняю его на Автобус / Поезд, он по-прежнему движется по карте.Но самое непонятное, когда я снова переключаюсь на проезд, карта теперь обновляется до «Транзит», а режим в состоянии «за рулем».

Пожалуйста, помогите!Заранее спасибо.

1 Ответ

0 голосов
/ 31 декабря 2018

Вероятно, это связано с асинхронностью setState, как описано в документации State and Lifecycle .При вызове this.setDirections() сразу после this.setState, this.state.mode будет иметь старое значение состояния, пока не завершится асинхронное обновление.Чтобы решить эту проблему, setState принимает второй аргумент для функции обратного вызова, которая будет запускаться после завершения обновления состояния (см. здесь ).Вы можете использовать это как this.setState({ mode }, () => this.setDirections()).Кроме того, вы можете использовать componendDidUpdate и проверить, изменились ли какие-либо зависимые значения, а затем вызвать this.setDirections().

...