22

gMapビューツールが表示されていることに気づきました…かなり異常です。彼らの地域はまだ適切に定義されているようです—私は彼らとうまくやりとりすることができます、それは混乱しているように見えるのは彼らの外見だけです。

私はどのマップピースにもCSSを適用していません。また、マップコンテナに適用したcssはwidth:100%; height:100%; z-index:0;（通常は適用しています）だけです。

私はページ上にposition:absolute;とposition:fixed;といくつかの高いz-indexs（500＆1000）を持つ他の要素を持っています。それらがマップのツールの視覚的な歪みを引き起こしている可能性はありますか？

Chrome、Chrome Canary、Ffx、Safari、Opera（Mac OSX）の最新バージョンでも同じ奇妙な視覚的歪みが見られます。

開発ツール/firebugを確認しましたが、予期しないCSSがマップのコンテナーまたはそのツールに直接適用されていません。

Google Maps Api v3：マップインターフェースツール

正確なHTMLは次のとおりです（他の要素とcssを削除しましたが、奇妙なことがまだ発生しています）。

<html style="width:100%;height:100%;">
    <head>
        <link rel="stylesheet" href="shared/bootstrap/css/foundation.min.css">
        <link rel="stylesheet" href="shared/bootstrap/css/v2.2.2.min.css">
        <script
            type="text/javascript"
            src="http://maps.googleapis.com/maps/api/js?key=...">
        </script>
        <script type="text/javascript">
            function ginit() {
                var vancouver = new google.maps.LatLng(49.285415,-123.114982);
                var mapOptions = {
                    center: vancouver,
                    zoom: 15,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(
                    document.getElementById("map"),
                    mapOptions
                );
                var infowindow = new google.maps.InfoWindow(),
                    marker;
            }//ginit()
        </script>
    </head>
    <body onload="ginit();" style="width:100%;height:100%;">
        <div id="map" style="width:100%;height:100%;"></div>
    </body>
</html>

編集：問題はFoundationとBootstrapの組み合わせに起因しているようです：どちらかを削除すると問題が修正されます。また、ページ上の要素がライブラリからクラスを参照していないことは問題ではありません。それはすべて同じように歪みを引き起こします。

これをフィドルに入れようとしましたが、jsfiddle.netをロードできませんでした。

4

3 に答える 3

58

同じ問題に直面する将来のユーザーのために、ここに修正があります。

#map img{max-width: inherit;}

他の回答のように、それは最大幅に問題があると言いました。

于 2013-01-13T18:50:03.630 に答える
20

{ img max-width:100% }Googleマップキャンバス用に設定されたブートストラップとファンデーション。これにより、マップコントロールが歪んで表示されます。cssをに変更しますmax-width:none;。[ソース]

警告img { max-width: 100% … }：レスポンシブレイアウトの画像の自動サイズ変更には明らかに不可欠なので、注意して使用してください。[ソース]

于 2012-12-20T00:48:35.233 に答える
0

Foundation 5は、gmapを壊すだけでなく、MapQuestも壊します。幸いなことに、GoomapとQuestの両方に、マップ表示に対してのみ動作するF5をオーバーロードできるクラスがあります。

.google-map {
  height: 400px;  // no default height
  color: #191970; // default color for both text and background is white !!!
}

.quest-map {
  height:400px; 
  color: #191970;
}

// Fix Foundation bug with MapQuest
.mqa-display {
  img {max-width: none;}
  label { width: auto; display: inline; }
}

// Fix Foundation bug with GoogleMap
.gm-style {
  img { max-width: none; }
  label { width: auto; display: inline; }
}
于 2015-02-18T14:36:44.347 に答える