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 }导入它，您将跳过GoogleApiWrapper HOC。

此外，您可能需要按如下所示提供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>

这是complete working example，摘自文档。

Google Maps React未加载

1 个答案: