Google Maps React 卡在“正在加载地图...”答案

【问题标题】：Google Maps React stuck in 'loading map...'Google Maps React 卡在“正在加载地图...”
【发布时间】：2019-11-21 15:44:08
【问题描述】：

我创建了一个名为 MapContainer 的组件，我的 MapContainer.js 如下所示：

import { Map, GoogleApiWrapper } from 'google-maps-react';
import React from 'react';
import '../css/MapContainer.css';

const MapContainer = ({ t }) => (
    <Map class="location_map"
    google={t.google}
    zoom={8}
    initialCenter={{ lat: 47.444, lng: -122.176}}/>
)

export default GoogleApiWrapper({
    apiKey: '...'
})(MapContainer);

然后我将这个组件导入到另一个名为 Details.js 的 .js 中。文件很长，我只放了MapContainer相关的部分。

import MapContainer from '../components/MapContainer';

...

然后在渲染部分内部：

            <div class="polaroid_des">
                <div class="container-list">
                    <p class="polaroid_title">{t('details.location')}</p>
                    <MapContainer t={t} />
                </div>
            </div>

我最终将其导出为：

export default withTranslation()(Details);

事实证明，当我运行我的网站时，我只会收到“正在加载地图...”。发生了什么事？

【问题讨论】：

@kinduser 如果你想你可以回答，我会接受你的回答。我切换到 react-google-maps 并使它工作。我还必须启用结算表单 GCP。
当然，我已经添加了答案:)

标签： javascript reactjs google-maps-react

【解决方案1】：

遇到了与 2 天前一样的问题。该库已过时，不再维护。我建议您改用google-map-react。我发现这个库更可靠。

Github：https://github.com/google-map-react/google-map-react

NPM：https://www.npmjs.com/package/google-map-react

【讨论】：

【解决方案2】：

根据docs，google 实例必须从装饰的组件道具中获取。

import { Map, GoogleApiWrapper } from 'google-maps-react';
import React from 'react';
import '../css/MapContainer.css';

const MapContainer = ({ t, google }) => (
    <Map class="location_map"
    google={google}
    zoom={8}
    initialCenter={{ lat: 47.444, lng: -122.176}}/>
)

export default GoogleApiWrapper({
    apiKey: '...'
})(MapContainer);

【讨论】：