[英]Make a circle shaped LeafLet map
Im building a webpage using Boostrap and want to make a LeafLet map that sits alongside some Boostrap img-circle
's. 我正在使用Boostrap建立一个网页,并希望制作一个与一些Boostrap
img-circle
并列的LeafLet地图。 I tried applying the img-circle
class to the map-preview
but it seems like LeafLet just draws over the circle. 我尝试将
img-circle
类应用于map-preview
但看起来LeafLet只是绘制了圆圈。 I also tried to apply border-radius:50%
with no effect. 我也尝试应用
border-radius:50%
没有效果。
Map html: 地图html:
<div class="map-wrapper">
<div id="map-preview" class=" img-circle"></div>
</div>
Map css: 地图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: '© ' + mapLink + ' Contributors', maxZoom: 18,}).addTo(map);
var marker = L.marker([48.46477, 7.88112]).addTo(map);
map.scrollWheelZoom.disable();
What I want (I would have to move the zoom buttons down, but i guess that should be no problem): 我想要什么(我必须向下移动缩放按钮,但我想这应该没问题):
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 http://plnkr.co/edit/Gje2ndRFdKwubWgCsHXW?p=preview
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 见http://plnkr.co/edit/jwpVbNqgk6V9xiZepHs5?p=preview
Note: this does not seem to work on all browsers 注意:这似乎不适用于所有浏览器
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.