4

私は2つのグーグルマップを持っています。1つ目は、Google Maps API（v3）を使用して作成され、＃map1に含まれています。2つ目は、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>

問題は次のとおりです。v3APIから作成されたGoogleマップは、Webkitベースのブラウザーで表示したときに、境界線の半径のスタイルが適用されたコンテナーの境界線を尊重しません。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を開いていますが、ほぼ1年後、まだ検討されていません）。

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

これは修正されたように見えるので、もはや問題ではありません。このフィドルでは、v3 map APIを使用して、マップコンテナのborder-radiusスタイルが実際に尊重されていることを確認できます。

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