Как использовать getDetails () в React Google Map
Сейчас я работаю с Google Map in 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: Cannot read property 'innerHTML' of undefined at Object._.Tv (util.js:20) at P4.attributionText_changed (places_impl.js:32) at Lc (js?libraries=geometry,drawing,places&key=AIzaSyBqtLvddq3jzZ_Lnu9M8266EMVBfXtlUT4:51) at P4._.M.bindTo (js?libraries=geometry,drawing,places&key=AIzaSyBqtLvddq3jzZ_Lnu9M8266EMVBfXtlUT4:126) at Object.Q4.f (places_impl.js:32) at Hr. (js?libraries=geometry,drawing,places&key=AIzaSyBqtLvddq3jzZ_Lnu9M8266EMVBfXtlUT4:179) at js?libraries=geometry,drawing,places&key=AIzaSyBqtLvddq3jzZ_Lnu9M8266EMVBfXtlUT4:136 at Object. (js?libraries=geometry,drawing,places&key=AIzaSyBqtLvddq3jzZ_Lnu9M8266EMVBfXtlUT4:60) at js?libraries=geometry,drawing,places&key=AIzaSyBqtLvddq3jzZ_Lnu9M8266EMVBfXtlUT4:136 at 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
Спасибо за подсказку :)
Ответы 1
Все модификации DOM должны выполняться через React, поскольку вы его используете. Поэтому вместо установки innerHTML (что может привести к уязвимостям) вы должны установить состояние компонента, а затем отобразить разметку в соответствии с состоянием. Вы можете извлечь компонент, отображающий InfoWindow:
class Popup extends Component {
state = {};
componentDidMount() {
const marker = this.props.marker;
getInfo(marker.title).then(data => {
console.info('---',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));
Приведенный выше пример, вероятно, не будет работать, это демонстрация подхода.
Привет Евгений Тимошенко! Спасибо за подробный ответ. Я пытаюсь сделать свой код таким образом. Огромное спасибо :)