Google Maps React 卡在 'loading map...'

Google Maps React stuck in 'loading map...'

我创建了一个名为 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);

事实证明,当我 运行 我的网站时,我只会得到 'Loading map...'。发生什么事了?

根据docsgoogle实例必须从装饰组件道具中获取。

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);

两天前遇到同样的问题。该库已过时,不再维护。我建议您改为使用 google-map-react。我发现那个库更可靠。

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

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