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')
);

希望对您有所帮助！

google-map-react 未显示

google-map-react not showing up

google-maps

reactjs

google-map-react