javascript - Google Maps React 卡在“正在加载地图...”
问题描述
我创建了一个名为 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);
事实证明,当我运行我的网站时,我只会得到“正在加载地图...”。发生了什么?
解决方案
根据文档,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);
推荐阅读
- google-colaboratory - 当我保持 n_jobs=8 时,google colab 分配了多少个“CPU”内核,有什么方法可以检查吗?
- python - 将 dask 任务流导出到 svg
- javascript - 通过 Ajax 和 PHP 下载 CSV 内容
- wordpress - 如何在 WordPress 中向 Facebook Pixel 事件添加事件 ID?
- java - 我可以将子类传递给需要超类的方法,并使用新的属性值吗?
- anaconda - PIL/Pillow - ValueError: py.__spec__ 未设置
- r - Foreach 代替 for 循环
- android - 如何在 Android 上正确设置 Firebase 分析?
- mysql - 从 bitbucket-piplines.yml 向 docker 映像传递额外的命令
- powershell - 将自定义字段添加到 DataTable。OleDbDataAdapter