reactjs - 如何全屏显示地图并以 react-simple-maps 为中心
问题描述
当我想显示墨西哥地图时我遇到了这个问题 正如你所看到的没有完全显示,我不想放大,我只想让地图居中显示并且完整
到目前为止,这是我的代码。
const geoUrl = 'https://gist.githubusercontent.com/diegovalle/5129746/raw/c1c35e439b1d5e688bca20b79f0e53a1fc12bf9e/mx_tj.json'
//const geoUrl = mapa2 ;
return (
<div>
<h1>Bienvenido a Blog!</h1>
<ComposableMap style={{backgroundColor:'gray'}} projection={'geoAlbers'}>
<Geographies style={{backgroundColor:'green', bottom:100}} geography={geoUrl}>
{({ geographies }) =>
geographies.map(geo => (
<Geography key={geo.rsmKey} geography={geo} />
))
}
</Geographies>
</ComposableMap>
解决方案
要使地图居中,您可以使用projectionConfig
带有center
. 就像是:
<ComposableMap
style={{ backgroundColor: "gray" }}
projection="geoAlbers"
projectionConfig={{
center:[-5, 25]
}}
>
结果是:
此处修改了您的代码的代码框。
推荐阅读
- android - 从我的应用程序文件夹中删除的图像仍在相机库中
- javascript - 无法从 nodejs 服务器获取 res.json() 值
- python - 在激活滚动条之前框架是可滚动的
- r - 如何在 R 中绘制多元逻辑回归图?
- threshold - 请问有人可以帮我解决这个错误信息吗?
- reactjs - UseEffect 清理功能不会删除我的间隔
- python - 创建与 Python 中具有相同项目数的两个列表中的项目数一样多的文件
- python - 为什么我的 django 没有显示来自 tempates 的模型渲染?
- acumatica - 导出批量付款时出现“无效 hdr”错误(导出场景流程)
- docker - 努力让 traefik 与堆栈中的服务一起工作