google-map-react未显示

Question

我正在尝试实现google-map-react，但是地图没有显示，我也找不到问题的答案。我已经设置了高度和宽度，并且标记正在显示，但地图没有。有什么想法吗？

我在屏幕上看到的是：https://ibb.co/LN1CK3X

<div className="results__map-handler">
    <GoogleMapReact
         bootstrapURLKeys={{key: 'MY_KEY'}}
         defaultCenter={{lat: 59.95, lon: 30.33}}
         defaultZoom={11}
    >
         <AnyReactComponent
             lat={59.955413}
             lng={30.337844}
             text={'MY MARKER'}
         />
    </GoogleMapReact>
</div>

.results__map-handler {
     width: 100%;
     height: 100vh;
}

Answer 1

看起来你把defaultCenter={{lat: 59.95, lon: 30.33}}中的"lng“和"lon”拼错了。当你修改这个的时候，你的代码就可以工作了，检查这个working jsbin。下面的代码。

const AnyReactComponent = ({ text }) => (
  <div style={{
    color: 'white', 
    background: 'grey',
    padding: '15px 10px',
    display: 'inline-flex',
    textAlign: 'center',
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: '100%',
    transform: 'translate(-50%, -50%)'
  }}>
    {text}
  </div>
);

class SimpleMap extends React.Component {
  static defaultProps = {
    center: {lat: 59.95, lng: 30.33},
    zoom: 11
  };

  render() {
    return (
     <div className="results__map-handler" style={{width: '100%', height: '100vh'}}>
       <GoogleMapReact
         defaultCenter={{lat: 59.95, lng: 30.33}}
         defaultZoom={11}
         bootstrapURLKeys={{key: 'YOUR_API_KEY'}}
      >
        <AnyReactComponent 
             lat={59.955413}
             lng={30.337844}
             text={'MY MARKER'}
        />
      </GoogleMapReact>
      </div>
    );
  }
}

ReactDOM.render(
    <SimpleMap/>,
  document.getElementById('main')
);

希望这能有所帮助！