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

Question

这个问题在这里已经有了答案：

使用 google-places-api 的简单 html 页面的 ApiNotActivatedMapError （6 个答案）

5 个月前关闭。

我正在使用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 密钥。

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

Answer 1

解决方案（感谢@MrUpsidown）：

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

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