我有两张谷歌地图.第一个是使用Google Maps API(v3)创建的,包含在#map1中.第二个使用Google建议的嵌入语法显示在iframe中,并包含在#map2中.
这是小提琴：http://jsfiddle.net/wmcmeans/mPGWx/7/
以下是片段：
<div id="map1" class="gmap left bling"></div> <iframe id="map2" class="gmap right bling" height="425" width="550" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?hl=en&q=augsburg+germany&ie=UTF8&hq=&hnear=Augsburg,+Bavarian+Swabia,+Bavaria,+Germany&t=h&ll=48.451123,10.862346&spn=0.004981,0.00912&z=16&output=embed"></iframe>
问题在于：在基于webkit的浏览器中查看时,从v3 API创建的Google地图不会考虑应用了border-radius样式的容器的边框. iframed(嵌入)方法没有显示相同的缺陷.
测试好：
FireFox v 19.0.2(Windows 7)
FireFox v 32.0.3(Windows 8.1)
IE9 v 9.0.8112(Windows 7)
IE11(Windows 8.1)
失败：
Chrome v 25.0.1364.160 m / Safari(Win / 32)v 5.0.3 / Opera v 11.64(Windows 7)
Chrome v 38.0.2125.104 m(Windows 8.1)
不推荐使用版本2映射,而不是选项.我想用CSS设置v3地图,没有图形或叠加.我正在寻找解决webkit渲染问题的方法. (我已经为此开了一个Chromium Issue #187187,差不多一年之后,还有待观察).
解决方法
这是解决方案：
http://jsfiddle.net/alxscms/3Kv99/
我正在使用几个额外的标记来实现这一点,我不喜欢这么多但是对我来说是唯一可行的方法.
<div class="wrapper"> <div class="map" id="map"></div> <i class="top"></i> <i class="right"></i> <i class="bottom"></i> <i class="left"></i> <i class="top left"></i> <i class="top right"></i> <i class="bottom left"></i> <i class="bottom right"></i> </div>
我的目标是有一个内边框和圆角,但你可以将边框粗细设置为0,你将只有地图上的圆角.这适用于FF,Chrome和IE.我没有在Opera或Safari上测试过.
