reactjs - google-map-react not showing up
问题描述
I am trying to implement google-map-react
but the map is not showing up and I couldn't find the answer to my problem. I have set both height and width and markers are showing up but the map is not. Any idea?
What I see on screen: 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;
}
解决方案
看起来您在 中将“lng”拼错为“lon” defaultCenter={{lat: 59.95, lon: 30.33}}
。修改此代码时您的代码有效,请检查此工作 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')
);
希望这可以帮助!
推荐阅读
- javascript - Flowtype 扩展对象类型
- javascript - 我们可以在javascript中重构解构参数吗
- reactjs - React.js:create-react-app 工作但返回这种类型的错误
- jquery - 取消调用另一个函数的函数
- html - 动画边框底部长度从 0 到 100
- javascript - 如何从 Java 服务器读取 JavaScript 中的数据?
- c++ - TCP服务器消息额外字符c ++
- c# - NLog dotnet core 2.1 邮件忽略级别
- reactjs - 测试材料-ui按钮文字
- python - 如何在 Pandas 数据框中按列值分组