Как использовать getDetails() в реакции Google Map

Сейчас я работаю с Google Map в React, и теперь у меня проблема с использованием функции getDetails() из Google PlacesService. Вот часть моего кода, где я хочу использовать эту функцию для отображения информации о выбранном месте в InfoWindow:

<Marker
  {...marker}
  key={i}
  position={marker.location}
  title={marker.title}
  place_id={marker.place_id}
  id={i}
  icon={'http://www.serwisstron.pl/icons/' + marker.type + '.png'}
  onClick={() => {
      props.toggleLocationsActive(i);
  }}
  animation={google.maps.Animation.DROP}
  >
  {i === props.activeKey && (
    service.getDetails({placeId: marker.place_id}, (marker, status) => {
      if(status === google.maps.places.PlacesServiceStatus.OK) {
      // here will be code will which put the data on InfoWindow
      }
   })
)}
   <InfoWindow onCloseClick={props.onToggleOpen}>
     <div id="details"><strong>{ marker.title } </strong><span><br/>Address:</span><span id="name"></span></div>
   </InfoWindow>)}
</Marker>

Теперь этот код получает эту ошибку:

Uncaught TypeError: невозможно прочитать свойство 'innerHTML' неопределенного в Object._.Tv (util.js:20) в P4.attributionText_changed (places_impl.js:32) в Lc (js?libraries=geometry,drawing,places&key=AIzaSyBqtLvddq3jzZ_Lnu9M8266EMVBfXtlUT4: 51) в P4._.M.bindTo (js?libraries=geometry,drawing,places&key=AIzaSyBqtLvddq3jzZ_Lnu9M8266EMVBfXtlUT4:126) в Object.Q4.f (places_impl.js:32) в Hr. (js?libraries=geometry,drawing,places&key=AIzaSyBqtLvddq3jzZ_Lnu9M8266EMVBfXtlUT4:179) в js?libraries=geometry,drawing,places&key=AIzaSyBqtLvddq3jzZ_Lnu9M8266EMVBfXtlUT4:136 в Object. (js?libraries=geometry,drawing,places&key=AIzaSyBqtLvddq3jzZ_Lnu9M8266EMVBfXtlUT4:60) в js?libraries=geometry,drawing,places&key=AIzaSyBqtLvddq3jzZ_Lnu9M8266EMVBfXtlUT4:136 в Object. (js?libraries=geometry,drawing,places&key=AIzaSyBqtLvddq3jzZ_Lnu9M8266EMVBfXtlUT4:60) at js?libraries=geometry,drawing,places&key=AIzaSyBqtLvddq3jzZ_Lnu9M8266EMVBfXtlUT4:136 at js?libraries=geometry,drawing,places&key=AIzaSyBqtLvddq3jzZ_Lnu9M8266EMVBfXtlUT4:60 at js?libraries=geometry, drawing,places&key=AIzaSyBqtLvddq3jzZ_Lnu9M8266EMVBfXtlUT4:136 at Sd (js?libraries=geometry,drawing,places&key=AIzaSyBqtLvddq3jzZ_Lnu9M8266EMVBfXtlUT4:63) at Rd.wa (js?libraries=geometry,drawing,places&key=AIzaSyBqtLvddq3jzZ_Lnu9M8266EMVBfXtlUT4:136) at util.js:1

Может быть, кто-то из вас знает, как правильно использовать эту функцию в реакции... Я долго искал это в гугле и ничего не нашел...

Вот ссылка на этот проект на Github: https://github.com/hajczek/Neighborhood---Warsaw-Cultural-Map

Спасибо за любую подсказку :)


reactjs google-maps google-api react-google-maps
person Iwona Hajczewska    schedule 26.05.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Все модификации DOM должны выполняться через React, поскольку вы его используете. Поэтому вместо установки innerHTML (что может привести к уязвимостям) вы должны установить состояние компонента, а затем отображать разметку в соответствии с состоянием. Вы можете извлечь компонент, который отображает InfoWindow:

class Popup extends Component {
  state = {};
  componentDidMount() {
    const marker = this.props.marker;

    getInfo(marker.title).then(data => {
        console.log('---',data);
      const link = data[3][0];
      const art = data[2][0];
      if (link) {
        this.setState({
          art,
          link,
          text: "See article in Wikipedia »"
        });
      } else {
        this.setState({
          info: "Unfortunately, no info was returned for this data."
        });
      }
    });

    geocodeByPlaceId(marker.place_id)
      .then(results => {
        const address = results[0].formatted_address;
        this.setState({ address });
      })
      .catch(error => console.error(error));
  }
  render() {
    const props = this.props;
    return (
      <InfoWindow onCloseClick={props.onToggleOpen}>
        <div>
          <span id="title">{props.marker.title}</span>
          <br />
          <br />
          <span id="address-title">Address:</span>
          <br />
          <span>{this.state.address}</span>
          <br />
          <br />
          <span>
            <em>{this.state.art}</em>
          </span>
          <br />
          <br />
          <a target="blank" href={this.state.link}>
            {this.state.text}
          </a>
          <span>{this.state.info}</span>
        </div>
      </InfoWindow>
    );
  }
}

и визуализировать его внутри маркера:

{i === props.activeKey && (
                <Popup marker={marker} onCloseClick={props.onToggleOpen} />
              )}

Обратите внимание, что getInfo должен разрешить обещание с данными:

export const getInfo = search => {
  return fetch(
    "https://pl.wikipedia.org/w/api.php?&origin=*&action=opensearch&search=" +
      search +
      "&limit=1",
    {
      headers: { Accept: "application/json" }
    }
  )
    .then(response => response.json())
    .catch(e => requestError(e));

Приведенный выше пример, вероятно, не будет работать, он предназначен для демонстрации подхода.

person Evgeny Timoshenko    schedule 26.05.2018
comment
Привет Евгений Тимошенко! Спасибо за этот подробный ответ. Я пытаюсь сделать свой код таким образом. Огромное спасибо :) - person Iwona Hajczewska; 27.05.2018