Question

我正在尝试在我的ReactJS应用程序中设置一个Google Map。我通过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密钥的屏幕截图

Answer 1

尝试这样

...
<GoogleMapReact bootstrapURLKeys={{ key: "*/ your google js api key is here */" }}
        center={{ lat: latitude, lng: longitude }}   // here
        defaultCenter={{lat: 37.0902, lng: 95.7129}}
        defaultZoom={11}
        zoom={11}
        resetBoundsOnResize={true}>
        <AnyReactComponent
            lat={latitude}
            lng={longitude}
            text={name}
        />
    </GoogleMapReact>
...

GoogleMapReact不显示地图或标记

1 个答案: