为什么不止一张地图不适用于传单

时间:2015-08-06 18:53:25

标签: leaflet mapbox

我想在表格的不同行中绘制一些地图。但是这些地图彼此重叠。我想知道为什么会这样。我想在不同的行中看到它们。这是我的jsfiddle http://jsfiddle.net/pyztr17y/10/

这是我的示例代码

<table>
<tr><td><div id="map" style="height:200px; width:200px;"> </div></td></tr>
<tr><td><div id="map2" style="height:200px; width:200px;"> </div></td></tr>
<tr><td><div id="map3" style="height:200px; width:200px;"> </div></td></tr>
</table>
    L.mapbox.accessToken = 'pk.eyJ1Ijoiam9oaXJidWV0IiwiYSI6InB4OG4yNEUifQ.b4xWL7oprs_pldzl0spX9Q';
var map = L.mapbox.map('map', 'mapbox.streets')
    .setView([42.491643,    -96.413101], 10);

var map2 = L.mapbox.map('map2', 'mapbox.streets')
    .setView([42.491643,    -96.413101], 10);

var map3 = L.mapbox.map('map3', 'mapbox.streets')
    .setView([42.491643,    -96.413101], 10);

1 个答案:

答案 0 :(得分:1)

问题是你的CSS。第一个地图的标识为map,您可以使用以下CSS规则对地图进行样式设置:

#map { position:absolute; top:0; bottom:0; width:100%; }

删除absolute定位,它会起作用。

示例:jsfiddle