[英]React.js and Mapbox: mapbox map not rendering properly when using react.js
I'm learning to use both react and mapbox,but am struggling with why my mapbox map is not rendering properly when loaded through React. 我正在学习使用react和mapbox,但我正在努力解决为什么我的mapbox地图在通过React加载时无法正确呈现。 When I load it normally (without React.js), there is no problem, as this following code works and the map appears normally:
当我正常加载它(没有React.js)时,没有问题,因为下面的代码工作并且地图正常显示:
<script src="https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.css"/>
<div> id="map"></div>
<script>
var map = L.mapbox.map('map', 'blabla.blabla').setView([lat, long], 9);
</script>
But when I do it the following way, the map often doesn't appear at all, or when it does, I see just a portion of it in the top left of the div. 但是当我按照以下方式进行操作时,地图通常根本不显示,或者当它出现时,我只看到div左上角的一部分。
<script src="path/to/react.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.css"/>
<div id="react-content">
<script src="path/to/react/content.js'></script>
</div>
//now inside react/content.js, there is a mapbox component inside an outer component. I'm leaving out the rest of the code to save space, and I believe that I am rendering the OuterComponent and the MapBoxMap component correctly inside that.
var MapBoxMap = React.createClass({
componentDidMount: function() {
L.mapbox.accessToken = this.props.accessToken;
var map = L.mapbox.map(this.getDOMNode(), this.props.mapId)
.setView([15, -105], 9);
},
render: function() {
return (
<div id="map"></div>
);
}
});
Doing things like zooming, or opening the chrome developer tools seems to make the map appear sometimes. 像缩放或打开chrome开发工具这样的事情似乎有时会使地图出现。 I don't know what is going on.
我不知道发生了什么事。 Is the component not mounted properly when I attempt to render the map?
尝试渲染地图时,组件是否未正确安装? I thought that is what componentDidMount was supposed to take care of?
我以为这是componentDidMount应该照顾的? I would really appreciate any insight!
我真的很感激任何见解! Alos, this map is being rendered inside some Zurb Foundation elements, so I don't know if that makes a difference?
Alos,这张地图正在一些Zurb Foundation元素中呈现,所以我不知道这是否有所作为?
You're missing the related CSS? 您是否缺少相关的CSS? You always need to set the height of the element:
您始终需要设置元素的高度:
html, body, #map {
height: 100%;
}
I am unable to test because of React but it sounds like the map is unable to get the correct dimensions from the element. 由于React,我无法测试,但听起来地图无法从元素中获取正确的尺寸。 That usually happens if you don't set the correct CSS or the element has
display: none;
如果你没有设置正确的CSS或元素有
display: none;
通常会发生这种情况display: none;
If setting the correct CSS doesn't work for you can try invalidating the size so the map will reset itself. 如果设置正确的CSS不起作用,可以尝试使大小无效,以便地图自行重置。
L.mapbox.Map
has a invalidateSize
method you can call, see: L.mapbox.Map
有一个你可以调用的invalidateSize
方法,参见:
http://leafletjs.com/reference.html#map-invalidatesize http://leafletjs.com/reference.html#map-invalidatesize
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.