无法显示来自 google 的图像 place details photoReference value in EXPO project

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...

如果在您调用它时图像加载正常，那么问题出在您的非地图相关代码 and/or 和您传递到请求中的 photoreference。我建议您注销 this.state.photo.photoReference 的值，以仔细检查它是否不为空，并且它是从“地点详情”调用返回的 valid photo reference。

如果上述请求不有效，那么问题出在您的 API 密钥上；确保您的 valid API key 属于启用了计费和地点 API 的项目。

希望对您有所帮助！

Answer 2

抱歉，我忘记了 post 解决方案，但问题是因为地点 api 调用 returns 另一个包含照片的 URL。此外，我将我的密钥限制在我的 android 应用程序上也无济于事......这是代码：

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 并将其用作我的源。

希望这对某人有所帮助。

无法显示来自 google 的图像 place details photoReference value in EXPO project

Unable to display image from google place details photoReference value in EXPO project

reactjs

react-native

google-maps

google-places-api

expo