如何使用getDetails()对Google作出反应
我现在正在使用Google，而现在我在使用来自Google的函数getDetails()时遇到了问题。下面是我的代码的一部分，其中我想使用这个函数来显示关于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 :无法读取未定义的Object._.Tv (util.js:20) at P4.attributionText_changed (places_impl.js:32)在Lc处的属性“innerHTML”(js?libraries=geometry，read，P4.attributionText_changed at P4._.M.bindTo ) (js?libraries=geometry，绘图，places&key=AIzaSyBqtLvddq3jzZ_Lnu9M8266EMVBfXtlUT4:126) at Object.Q4.f (places_impl.js:32) at Hr. . (js?libraries=geometry，绘图，places&key=AIzaSyBqtLvddq3jzZ_Lnu9M8266EMVBfXtlUT4:179) at js?libraries=geometry，绘图，places&key=AIzaSyBqtLvddq3jzZ_Lnu9M8266EMVBfXtlUT4:136 at Object)。( places&key=AIzaSyBqtLvddq3jzZ_Lnu9M8266EMVBfXtlUT4:60)，js?libraries=geometry，Object )。(绘画，places&key=AIzaSyBqtLvddq3jzZ_Lnu9M8266EMVBfXtlUT4:60) at js?libraries=geometry，绘图，places&key=AIzaSyBqtLvddq3jzZ_Lnu9M8266EMVBfXtlUT4:136 at js?libraries=geometry，绘图，places&key=AIzaSyBqtLvddq3jzZ_Lnu9M8266EMVBfXtlUT4:60 at js?libraries=geometry，绘图，places&key=AIzaSyBqtLvddq3jzZ_Lnu9M8266EMVBfXtlUT4:136 at Sd (js?libraries=geometry，绘图，places&key=AIzaSyBqtLvddq3jzZ_Lnu9M8266EMVBfXtlUT4:63) at Rd.wa，places&key=AIzaSyBqtLvddq3jzZ_Lnu9M8266EMVBfXtlUT4:63) at Rd.wa，places&key=AIzaSyBqtLvddq3jzZ_Lnu9M8266EMVBfXtlUT4:136) at util.js:1 )
也许你们中的一些人知道，如何正确地使用这个功能来做出反应.我在谷歌上找了很久，什么也没找到.
下面链接到Github：https://github.com/hajczek/Neighborhood---Warsaw-Cultural-Map上的这个项目
(谢谢你的提示:)
回答 1
Stack Overflow用户
发布于 2018-05-26 23:44:36
所有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));上面的示例可能不起作用，而是演示该方法。
https://stackoverflow.com/questions/50541214
复制相似问题
腾讯云开发者
