在webkit浏览器中，v3谷歌地图不尊重容器的border-radius。有人有解决方法吗？

Question

我有两张谷歌地图。第一个是使用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&amp;q=augsburg+germany&amp;ie=UTF8&amp;hq=&amp;hnear=Augsburg,+Bavarian+Swabia,+Bavaria,+Germany&amp;t=h&amp;ll=48.451123,10.862346&amp;spn=0.004981,0.00912&amp;z=16&amp;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，差不多一年之后，还有待观察。）

Answer 1

以下是解决方案：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上测试过。

Answer 2

这似乎是固定的，所以它不再是问题。您可以使用v3 map API在此fiddle验证是否确实遵守了地图容器的border-radius样式。

<div id="map3" class="gmap"></div>

Answer 3

这对我有用：

setDate