制作一个圆形的LeafLet地图

Question

我正在使用Boostrap构建网页，并希望制作一个LeafLet地图，该地图位于某些Boostrap img-circle的旁边。我尝试将img-circle类应用于map-preview，但似乎LeafLet只是在<圈>上绘制了 。我也试图申请border-radius:50%但没效果。

映射html：

 <div class="map-wrapper">
     <div id="map-preview" class=" img-circle"></div>
 </div>

Map css：

.map-wrapper{
    position: relative;
    width: 200px;
    height: 200px;
    display: inline-block;
}

.map-wrapper #map-preview{
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

加载地图的JavaScript：

var map = L.map('map-preview').setView([48.46477, 7.88112], 15);
mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '&copy; ' + mapLink + ' Contributors', maxZoom: 18,}).addTo(map);
var marker = L.marker([48.46477, 7.88112]).addTo(map);
map.scrollWheelZoom.disable();

我得到了什么：

我想要什么（我必须向下移动缩放按钮，但我想这应该没问题）：

Answer 1

您还应该将z-index属性设置为地图容器：

#mapid{
  width: 400px; 
  height: 400px; 
  border-radius: 200px; 
  position: relative; 
  z-index: 500
}

http://plnkr.co/edit/Gje2ndRFdKwubWgCsHXW?p=preview

Answer 2

你的错误在你的CSS ......

您必须为地图设置尺寸（以像素为单位的平方），并将半径设置为此值的一半。

例如

width: 400px;
height: 400px;
border-radius: 200px;

请参阅http://plnkr.co/edit/jwpVbNqgk6V9xiZepHs5?p=preview

注意：这似乎不适用于所有浏览器