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

---

此外，您可能需要提供宽度和高度图属性，如下所示：

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

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