Question

我正在使用MapQuest和Leaflet。我可以同时在屏幕上显示多个地图。我编辑了leaflet.css文件，要更改地图中某些图标的大小，我会获得地图当前所处的缩放，并更改leaflet.css文件中的图标大小，如下所示： / p>

if (Map.getZoom()=== 13)
{
    $('.leaflet-label').css('font-size', '24px');
}

以上是标签，但图标/标记几乎相同。现在因为我有4张地图，所以他们都使用相同的leaflet.css文件。因此，当我放大某个特定地图时，所有其他地图的标签/标记/图标也会发生变化，即使只在一张地图上使用缩放。

我的HTML看起来像这样：

<link rel="stylesheet" href="leaflet.css" />
<link rel="stylesheet" href="leaflet.label.css" />

<div class="maps" style="width:400px; height:400px; left:1400px;" id="map"></div>
<div class="maps" style="width:400px; height:400px; top:-400px;" id="MAP2"></div>
<div class="maps" style="width:400px; height:400px; top:-800px; left:960px;" id="MAP3"></div>
<div class="maps" style="width:400px; height:400px; top:-1200px; left:550px;" id="MAP4"></div>

有没有办法设置它，以便每个div独立于其他div？

Answer 1

在你的css中，你已经拥有.maps{}类（我假设），其中包含所有地图的所有默认共享样式设置。

如果您愿意，可以为每个不同的ID指定设置，

#MAP2{
    width:400px; 
    height:400px; 
    top:-400px;
}
#MAP3{
    width:400px; 
    height:400px; 
    top:-800px;    
    left:960px;
}
#MAP4{
    width:400px; 
    height:400px; 
    top:-1200px;   
    left:550px;
}

然后，您可以使用id选择器而不是类选择器来选择要缩放的地图。

多个div与不同的CSS

1 个答案: