Google Maps React未加载

Question

我正在展示一个带有有效密钥的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)

控制台日志中没有任何错误。

Answer 1

首先，请确保在您要使用默认导出的MapContainer所在的位置，如下所示：

import MapContainer from './pathToContainer/MapContainer'

否则，通过命名导出{ MapContainer }将其导入，您将跳过GoogleApiWrapperHOC。

另外，您可能需要提供width和height映射属性，如下所示：

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

这是一个完整的工作示例，摘自文档。