1

我正在尝试在我的 ReactJS 应用程序中设置谷歌地图。我通过 npm https://www.npmjs.com/package/google-map-react了解了 GoogleMapReact 。我已经添加了所有设置,但是运行时会显示以下内容:

在此处输入图像描述

标记正确显示名称,但地图本身不会加载。控制台中没有警告或错误。我使用了错误类型的密钥吗?

我的代码如下:

class Breweries extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        error: null,
        isLoaded: false,
        items: []
    };      
}

componentDidMount(){
    fetch("https://api.openbrewerydb.org/breweries?by_city=pittsburgh&by_state=pennsylvania")
        .then(res => res.json())
        .then(
        (result) => {
            this.setState({
                isLoaded: true,
                items: result
            });
        },
        (error) => {
            this.setState({
            isLoaded: true,
            error
        });
    });        
}

render() {
    const { error, isLoaded, items } = this.state;
    if (error) {
        return <div>Error: {error.message}</div>;
    } else if (!isLoaded) {
        return <div>Loading...</div>;
    } else {
        return (
        <ListGroup>
            {items.map(item => (
                <ListGroup.Item key={item.name}>
                    <ul>
                        <li>{item.name}</li>
                        <li>{item.brewery_type}</li>
                        <li>{item.street}, {item.city}, {item.state}</li>
                        <li><a href={item.website_url}>{item.website_url}</a></li>

                        <MiniMap latitude={item.latitude} longitude={item.longitude} name={item.name} />
                    </ul>
                </ListGroup.Item>
            ))}
        </ListGroup>
        );
    }
}
}

const MiniMap = ({ latitude, longitude, name }) => (
<div style={{height: '500px', width: '500px', position: 'relative'}}>
    <GoogleMapReact bootstrapURLKeys={{ key: "*/ my google js api key is here */" }}
        center={{ latitude, longitude }}
        centerAroundCurrentLocation={true}
        zoom={11}
        resetBoundsOnResize={true}>
        <AnyReactComponent
            lat={latitude}
            lng={longitude}
            text={name}
        />
    </GoogleMapReact>
</div>
);

编辑:添加 API 密钥的屏幕截图

在此处输入图像描述

4

0 回答 0