javascript - Mapbox 画布在半屏上渲染
问题描述
我正在尝试将 MapBox 与 React.js 一起使用。这是我的代码:
import ReactMapboxGl, {Layer, Feature} from "react-mapbox-gl";
render() {
const Map = ReactMapboxGl({
accessToken: "..."
});
return (
<div className="App">
<Map style="mapbox://styles/mapbox/streets-v9"
containerStyle={{
height: "100vh",
width: "100vw",
}}>
<Layer
style={{
position: 'absolute',
left: 0,
top: 0,
}}
type="symbol"
id="marker"
layout={{"icon-image": "marker-15"}}>
<Feature coordinates={[-0.481747846041145, 51.3233379650232]}/>
</Layer>
</Map>
{/*<button onClick={this.requestLocation}>Refresh position</button>*/}
</div>
);
}
问题是,结果如下:
它总是正好是宽度的 50%。我正在使用这个模块:https ://github.com/alex3165/react-mapbox-gl
我搞砸了什么?
解决方案
对不起,迟到的答案,这是由 css 冲突引起的。尝试评论 .App 的文本对齐中心
.App {
/* text-align: center; */
}
这应该工作!
推荐阅读
- c# - IInputStream.ReadAsync() 和 DataReader.LoadAsync() 仅适用于固定长度读取 (UWP C#)
- mysql - MYSQL 存储过程 - 在 MYSQL 中编写此存储过程的正确方法是什么 - 我收到 1064 错误
- laravel - Laravel 无法访问子域中间件中的用户
- scheduling - 实时调度问题:相对期限和绝对期限?
- xcode - 阻止 Xcode 打开新文件
- django - Django 2.1.2 - AttributeError:'UserProfile'对象没有属性'object'
- okta - 为 jupyterhub 设置 Okta 身份验证
- vb.net - 将绑定源转换为 DataTable
- regex - 正则表达式 - 在 IntelliJ IDEA'a 中查找不以特定前缀开头的匹配词在路径中查找
- php - 在 MS SQL Server 查询中使用 HTML 输入