@react-google-maps/api 的自动完成给我“此页面无法正确加载谷歌地图”

问题描述

我正在使用 https://www.npmjs.com/package/@react-google-maps/api 来呈现 googlemaps，我正在尝试让自动完成功能正常工作。 https://react-google-maps-api-docs.netlify.app/#autocomplete

当我尝试搜索某个位置时，我得到“此页面无法正确加载 Google 地图”。 他们网站上的例子也有同样的错误。

import React from 'react'
import { GoogleMap,LoadScript,Autocomplete  } from '@react-google-maps/api';

const api = process.env.REACT_APP_GOOGLE_MAPS_API_KEY;

const containerStyle = {
    width: '1200px',height: '500px'
};

const center = {
    lat: -3.745,lng: -38.523
};

const Gmap = () => {

    return (
        <LoadScript
            googleMapsApiKey ={api}
            libraries={["places"]}
        >
            <GoogleMap
                mapContainerStyle={containerStyle}
                center={center}
                zoom={10}
            >
                { /* Child components,such as markers,info windows,etc. */ }
                <Autocomplete>
                    <input
                        type="text"
                        placeholder="Input"
                        style={{
                            BoxSizing: `border-Box`,border: `1px solid transparent`,width: `240px`,height: `32px`,padding: `0 12px`,borderRadius: `3px`,BoxShadow: `0 2px 6px rgba(0,0.3)`,fontSize: `14px`,outline: `none`,textOverflow: `ellipses`,position: "absolute",left: "50%",marginLeft: "-120px",top: "2%"
                        }}
                    />
                </Autocomplete>
                <></>
            </GoogleMap>
        </LoadScript>
    )
}

export default React.memo(Gmap)

您需要在 CodesandBox 中使用自己的 Google api key。

https://codesandbox.io/s/nice-galileo-zdn1c?file=/src/App.js

解决方法

解决方案（感谢@MrUpsidown）：

正如@MrUpsidown 评论的那样，我的 API 密钥设置错误。我在我的控制台中得到和 ApiNotActivatedMapError。我必须在我的项目中启用 Places API。

https://developers.google.com/maps/gmp-get-started#enable-api-sdk