我在我的网站中加入了 Google map ，如下所示:
<div class="map">
<div class="mapoverlay" onclick="style.pointerEvents='none'"></div>
<iframe id="googlemap" width="199" height="199" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?key=KEY&zoom=14&language=nb&q=Linneaveien%2024C,1450+NESODDTANGEN"></iframe>
</div>
我应用了以下 CSS 规则:
.map {
text-align: center;
}
.mapoverlay{
background: transparent;
position: relative;
width: 100%;
height: 199px;
top: 199px;
margin-top: -199px;
}
.map iframe{
border: 1px transparent solid !important;
-webkit-border-radius: 50% !important;
-moz-border-radius: 50% !important;
border-radius: 50% !important;
-webkit-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.60);
-moz-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.60);
box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.60);
opacity: 0;
opacity: 1 \9;
/*just in case ie*/
-webkit-animation: fadeIn ease-in 1;
-moz-animation: fadeIn ease-in 1;
animation: fadeIn ease-in 1;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
animation-delay: 0.5s;
}
在this page你可以看到 map 是圆形的。但是当我通过智能手机 (iPhone) 查看 map 时， map 如下所示:
我可以应用哪些规则使其在智能手机上也是圆形的？
提前致谢!
最佳答案
我刚刚创建了以下示例并在 iPhone/Safari 上进行了测试，并且按预期工作。
HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="map">
<iframe width="500" height="500" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.dk/?ie=UTF8&t=m&ll=55.677875,11.075935&spn=0.048395,0.086002&z=13&output=embed"></iframe>
</div>
</body>
</html>
CSS
#map{
overflow: hidden;
border-radius: 50%;
position: relative;
z-index: 99;
height: 500px;
width: 500px;
}
#map iframe {
position: absolute;
border-radius: 50%;
top: 0; left: 0;
z-index: 50;
}
关于html - 谷歌地图 iframe 在移动设备上没有圆形边框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41874751/