我正在尝试实现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;
}
答案 0 :(得分: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')
);
希望这会有所帮助!