Question

Google Maps React 未加载

2018-11-27

3232

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)

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

Answer 1

首先，请确保在包含 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>

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