无法显示来自谷歌位置详细信息照片的图像在世博项目中的参考值

Question

我正在尝试显示Google placeDetail API返回的每个地方的第一个图像。我似乎没有任何错误，这是我的代码。

export default class BarCards extends React.Component{
constructor(props){
super(props);
this.state.name = props.name;
this.state.photo = props.photo;
this.state.price = props.price;
this.state.rating = props.rating;
}
state = {
name: null,
photo: null,
price: null,
rating: null,
}

render() {
return (
<View style={HopListStyles.barCards}>
<Image style={{height: 100, width: 100}}source={{uri: `https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&maxheight=400&photoreference=${this.state.photo.photoReference}&key='api_key'`}}/>
</View>
);
}
}

我能够从 json 文件中获取其他信息，因此我认为我的导入没有问题。

提前感谢！

Answer 1

首先，我建议您尝试对"放置照片"请求进行硬编码。 例如，使用以下方法(但AIza...替换为完整的 API 密钥(：

https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&maxheight=400&photoreference=CnRvAAAAwMpdHeWlXl-lH0vp7lez4znKPIWSWvgvZFISdKx45AwJVP1Qp37YOrH7sqHMJ8C-vBDC546decipPHchJhHZL94RcTUfPa1jWzo-rSHaTlbNtjh-N68RkcToUCuY9v2HNpo5mziqkir37WU8FJEqVBIQ4k938TI3e7bf8xq-uwDZcxoUbO_ZJzPxremiQurAYzCTwRhE_V0&key=AIza...

如果在调用此函数时图像加载正常，则问题出在与地图无关的代码和/或传递到请求中的photoreference上。我建议您注销this.state.photo.photoReference的值，以仔细检查它是否不为 null，并且它是从"地点详细信息"调用返回的有效照片参考。

如果上述请求不起作用，则问题出在您的 API 密钥上;请确保您具有属于启用了计费和地点 API 的项目的有效 API 密钥。

希望这有帮助！

Answer 2

抱歉，我忘了发布解决方案，但问题是因为 places api 调用返回另一个包含照片的 URL。此外，我将密钥限制在我的安卓应用程序上的事实也无济于事......这是代码：

export default class BarCards extends React.Component{
constructor(props){
super(props);
this.state={
name: props.name,
photo: props.photo,
price: props.price,
rating: props.rating,
imageUrl: null,
}
}
_getPhoto = async() => {
const url=`https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&maxheight=400&photoreference=${this.state.photo.photoReference}&key='api-key'`;
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onload = () => {
this.setState({imageUrl: xhr.responseURL});
};
xhr.send(null);
}
render() {
const { onPress } = this.props;
return (
<Image style={cardStyles.barPhoto} source={{uri: this.state.imageUrl}}/>
);
}

我使用上面的函数来存储返回的 URL，并将其用作我的源。

希望这对某人有所帮助。