制作一个圆形的LeafLet地图

Im building a webpage using Boostrap and want to make a LeafLet map that sits alongside some Boostrap img-circle's. I tried applying the img-circleclass to the map-preview but it seems like LeafLet just draws over the circle. I also tried to apply border-radius:50% with no effect.

我正在使用Boostrap构建一个网页,并希望制作一个与一些Boostrap img-circle并排放置的LeafLet地图。我尝试将img-circleclass应用于地图预览,但看起来LeafLet只是画了一圈。我也尝试应用border-radius:50%但没有效果。

Map 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 to load the map:

用于加载地图的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();

What I get:

我得到了什么:

What I want (I would have to move the zoom buttons down, but i guess that should be no problem):

我想要什么(我必须向下移动缩放按钮,但我想这应该没问题):

2 个解决方案

#1

You should also set a z-index property to the map container:

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

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

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

#2

Your mistake is in your CSS ...

你的错误在你的CSS ...

You have to set a dimension to your map (square in pixels) and set your radius to half of this value.

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

For example

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

See http://plnkr.co/edit/jwpVbNqgk6V9xiZepHs5?p=preview

Note: this does not seem to work on all browsers

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

#1