4

我有两张谷歌地图。第一个是使用 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 地图不尊重应用了边框半径样式的容器的边框。iframed（嵌入）方法没有显示相同的缺陷。

测试良好：

火狐 v 19.0.2 (Windows 7)

火狐 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，差不多一年后，还没有看到）。

4

3 回答 3

3

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

于 2013-07-19T21:14:09.507 回答
1

这对我有用：

-webkit-transform: translate3d(0px, 0px, 0px);
-webkit-mask-image: -webkit-radial-gradient(white, black);
于 2016-08-10T01:09:26.447 回答
0

这似乎已解决，因此不再是问题。您可以在 this fiddle使用 v3 地图 API 验证地图容器的边界半径样式确实得到尊重。

<div id="map3" class="gmap"></div>
于 2014-03-14T17:46:32.863 回答