如何使用Google Places API获取城市照片

问题描述

对于我的react weather-app，我需要附加到代表城市的img的每个Card元素上。 除了下载大量图像之外，我发现Google地方信息可以为我提供该信息。 我注册并从Google Cloud Platform获得了api密钥。

这是我的卡组件：

p.s。 -googleapi网址之前来自herokuapp的https是我发现可处理CORS错误的唯一解决方案

import React,{ useState,useEffect } from 'react'
import Card from 'react-bootstrap/Card';
import Button from 'react-bootstrap/Button';

export default function CardUI({ apiKey,place }) {
    
    const [photoUrl,setPhotoUrl] = useState('');
    
    useEffect( () => {
        fetch(`https://cors-anywhere.herokuapp.com/https://maps.googleapis.com/maps/api/place/details/
json?place_id=${place}&fields=photo&key=${apiKey}`)
            .then(response =>response.json())
            .then(data => {
                setPhotoUrl(data);
                console.log(data);
            })
    },[])
    
    return (
        <Card style={{ width: '18rem' }}>
            <Card.Img variant="top" src={photoUrl} />
            <Card.Body>
                <Card.Title>Card Title</Card.Title>
                <Card.Text>
                    Some quick example text to build on the card title and make up the bulk of
                    the card's content.
                </Card.Text>
                <Button variant="primary">Go somewhere</Button>
            </Card.Body>
        </Card>
    )
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）