谷歌地图react没有出现

IT技术 reactjs
2021-05-04 19:32:15

我正在尝试使用google-map-react,但是当我尝试渲染它时,什么也没有出现。我错过了什么吗?

import GoogleMap from 'google-map-react';
import React, { Component } from 'react';

class GMaps extends Component {



static defaultProps = {
    center: {lat: 59.95, lng: 30.33},
    zoom: 11
  };

render() {
  return (
   <div>
    <GoogleMap
       style={{width: "100%", height: "500"}}
       defaultCenter={this.props.center}
       defaultZoom={this.props.zoom}
     />
   </div>
  )
} 


}
2个回答

为容器 div 填充分配高度和宽度,将解决该问题

<div style={{ height: '100vh', width: '100%' }}>
<GoogleMapReact
   defaultCenter={this.props.center}
   defaultZoom={this.props.zoom}
 />
</div>

如入门中所述:https : //www.npmjs.com/package/google-map-react

请检查您是否正确呈现应用程序。

请参阅此工作示例: Codepen