Leaflet 为什么传单中有多张地图不起作用

Leaflet 为什么传单中有多张地图不起作用,leaflet,mapbox,Leaflet,Mapbox,我想在表的不同行中绘制一些地图。但这些地图相互重叠。我想知道为什么会这样。我想看看他们在不同的行。这是我的名片 这是我的示例代码 <table> <tr><td><div id="map" style="height:200px; width:200px;"> </div></td></tr> <tr><td><div id="map2" style="height:200px;

我想在表的不同行中绘制一些地图。但这些地图相互重叠。我想知道为什么会这样。我想看看他们在不同的行。这是我的名片

这是我的示例代码

<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);

L.mapbox.accessToken='pk.eyj1ijoiam9oaxjidwv0iiiiysi6inb4og4yneuifq.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);

问题在于您的CSS。第一个贴图具有id
map
,您可以使用以下CSS规则设置该贴图的样式:

#map { position:absolute; top:0; bottom:0; width:100%; }
卸下
绝对定位
即可


示例:

地图相互重叠。我怎样才能解决这个问题?