@react-google-maps/api 的自动完成功能给了我“此页面无法正确加载 Google 地图”[重复]答案

【问题标题】：@react-google-maps/api's Autocomplete is giving me "This page cant load Google maps correctly" [duplicate]@react-google-maps/api 的自动完成功能给了我“此页面无法正确加载 Google 地图”[重复]
【发布时间】：2021-07-10 10:57:52
【问题描述】：

我正在使用 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, 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

【问题讨论】：

使用有效的 API 密钥。
我正在使用有效的 api 密钥。我在 CodeSandBox 和 StackOverflow 上删除了它，因为我不想分享它。
如果它不起作用，你怎么知道它是有效的？我打开了你的沙箱并插入了一个有效的 API 密钥，它工作正常。查看 JS 控制台了解详细信息，确保密钥有效并且在您的 google 控制台中启用了相应的 API。

标签： javascript reactjs google-maps react-google-maps googleplacesautocomplete

【解决方案1】：

解决方案（感谢@MrUpsidown）：

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

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

【讨论】：