谷歌地图的iframe移动

  • Z时代
  • 2024-01-10
  • 分类：问答

我包括谷歌地图没有轮边界在我的网站像以下：谷歌地图的iframe移动

<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你可以看到，地图像它应该是圆的。但是，当我从我的智能手机（iPhone）查地图看起来是这样的：

哪些规则我可以​​申请，这也是一轮的智能手机？

提前致谢！

回答：

我刚刚创建了以下示例并在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&amp;t=m&amp;ll=55.677875,11.075935&amp;spn=0.048395,0.086002&amp;z=13&amp;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; 
}

以上是 谷歌地图的iframe移动 的全部内容， 来源链接： utcz.com/qa/265723.html

回到顶部