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

Question

我创建了一个名为 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);事实证明，当我运行我的网站时，我只会得到“正在加载地图...”。发生了什么？

Answer 1

2天前有同样的问题。该库已过时，不再维护。我建议你google-map-react改用。我发现那个库更可靠。

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

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

Answer 2

根据文档，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);