reactjs - Google Maps React 未加载
问题描述
我正在展示一个带有有效密钥的 Google Maps React 的基本示例,但不是向我展示地图,而是向我展示了一个文本,上面写着“正在加载地图......”
import {GoogleApiWrapper, Map, MapProps} from 'google-maps-react';
import * as React from 'react'
export class MapContainer extends React.Component<MapProps> {
public render() {
return (
<Map
google={this.props.google}
centerAroundCurrentLocation={true}
zoom={20}
/>
);
}
}
export default GoogleApiWrapper({
apiKey: (API_KEY)
})(MapContainer)
控制台日志和任何内容都没有错误。
解决方案
首先,请确保在包含 MapContainer 的地方使用默认导出,如下所示:
import MapContainer from './pathToContainer/MapContainer'
否则通过命名导出导入它,{ MapContainer }
您将跳过GoogleApiWrapper
HOC。
此外,您可能需要提供宽度和高度图属性,如下所示:
<Map
style={{ width: '100%', height: '100%' }}
google={this.props.google}
centerAroundCurrentLocation={true}
zoom={20}
/>
或者您可能需要设置地图包装 div 的样式:
<div
style={{
position: "relative",
height: "calc(100vh - 20px)"
}}
>
<Map
google={this.props.google}
centerAroundCurrentLocation={true}
zoom={20}
/>
</div>
这是一个完整的工作示例,取自文档。
推荐阅读
- apache-spark - Spark bulk insert 的 Elasticsearch 索引速度非常慢
- c++ - 在主窗口之前显示登录对话框并隐藏主窗口按钮
- ios - 从 mac 连接到 nat64 网络的设备中没有互联网
- javascript - 不同的字体源leaflet-awesome-marker和Leaflet-easy-button
- qt - 子类 Keys.onPressed 和 MouseArea.onClicked
- php - 获取多对多关系中的计数以进行记录编辑
- c# - 如何使用 jQuery 在弹出窗口中显示 JSON 解析数据
- xpath - 如何在 Firefox 开发者版中找到 XPath?
- sql - 从数字sql中的字符串替换多个值
- javascript - 如何在 JavaScript 中设置系统属性