Google Maps API v3ツール：視覚的な歪み？

私は、gMapビューツールが表示されていることに気付きました。彼らの地域はまだ適切に定義されているようです - 私はそれらとちょうどうまくやり取りすることができます、それはちょうど混乱している外観です。Google Maps API v3ツール：視覚的な歪み？

マップの一部にはCSSを適用していません。マップコンテナに適用したCSSは、通常はwidth:100%; height:100%; z-index:0;です（通常はそうです）。

私はposition:absolute;とposition:fixed;といくつかの高いz-index（500 &000）を持つ他の要素がページにあります。彼らは地図のツールの視覚的な歪みを引き起こしている可能性はありますか？

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

私はdev tools/firebugを確認しました。予期せぬCSSがマップのコンテナに適用されているか、ツールに直接適用されていません。ここで

Google Maps Api v3: Map interface tools

は（私は他の要素とCSSを取り除かとすごみはまだ起こる）正確なHTMLです：

<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>

EDIT：問題がから来て表示されますFoundationとBootstrapの組み合わせ：どちらか一方を削除すると、問題が修正されます。また、libからのページ参照クラスの要素がなくても、それは歪みをすべて同じにします。

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

出典

2012-12-19 jacob

ちょうどこの新しいプロジェクトですか？すべてのプロジェクト？ 1台のコンピュータで？すべてのコンピュータ？デモを見ることはできますか？そうでなければここにはあまりありません。 – Sparky

私はその時点で1つのプロジェクトに取り組んでいます。私は2台のコンピュータでそれをテストしました：OSX 10.6と10.8。私は愚かなダウン・フィドルに取り組んでいます（フレームワークの問題がたくさんあります）、jsfiddle.netへのアクセスに問題があります。 – jacob

ええ、何らかの理由で、jsFiddleは現在非常に遅いです。あなたはデモを作ることによって正しいことをやっていますが、これはまさにjsFiddleに質問をしてコードを表示するべきではありません。 – Sparky

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

#map img{max-width: inherit;}

他の回答と同様に、max-widthに問題があります。

出典

2013-01-13 18:50:03

'#map img {max-width：inherit！important; max-height：inherit！important} ' –

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

警告は：どうやらimg { max-width: 100% … }は、応答性のレイアウトに自動-リサイズした画像のために不可欠であるので、注意して使用します。 [source]

出典

2012-12-20 00:48:35 jacob

はい、＃マップキャンバスIMG { 最大幅：なし; } 私のためにこれを修正しました。 –

Foundation 5はgmapを壊すだけでなく、MapQuestも破損します。幸いにも両方のGoomap &クエストには、マップ表示のためだけに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-18 14:36:44 Fulup

Google Maps API v3ツール：視覚的な歪み？

答えて

関連する問題