2

埋め込まれた Google マップを表示する特別な部分を持つアプリを作成します。最初はすべてうまくいきますが、デバイスを元に戻すと、マップが定義された幅を超えて css クラスを失います (使用した 220px の幅を適用できません)。

{ // とにかく、マップに触れると OK になり、その幅に移動します // } { // Twitter Bootstrap を使用しています // }

私のこの大きな問題の解決策は何ですか？

あなたの親切な返事を待っています。

これは埋め込まれた Google マップです。

    <article class="container">
     .
     .
     .
     ...( some tags go here )

           <section class="span12">
        <div class="map">
            <iframe width="80%" height="50%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/?ie=UTF8&amp;ll=39.6846,-104.88802&amp;spn=0.088114,0.209255&amp;t=m&amp;z=13&amp;output=embed">
            </iframe>
        </div>
           </section>

    </article>

これは私が使用しているCSSクラスです:

  @media (max-width: 400px) {
  .map {width: 220px;}
  }
4

2 に答える 2

3

Heh :-DI がついに解決策にたどり着きました:

iframe HTML5 タグは、デバイスの向きをサポートしていないため、この点では役に立ちません。したがって、削除する必要があり、代わりに id="mapDiv" で div を使用しました。

     <body onLoad="initialize()"> <!-- Important -->
       <article class="container">
       .
       .
       .
       ...( some tags go here )

            <section class="span12">
                <div id="mapDiv"> </div> <!-- Changed -->
            </section>

       </article> 
     </body>

Sven Bieder のコメントによると、Google マップ API を次のように使用しました。

/*Added javascript*/
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">

 function initialize() {
     var position = new google.maps.LatLng(38.89655520572012, -77.03372955322266); /*Here is the coordinates of the specific place we want to mark on map*/
     var myOptions = {
     zoom: 15,
     center: position,
     mapTypeId: google.maps.MapTypeId.ROADMAP,
     };
     var map = new google.maps.Map(
     document.getElementById("mapDiv"), myOptions);

     var marker = new google.maps.Marker({
     position: position,
     map: map,
     title:"We are here.",
     }); 
     }
</script>

さて、デバイスの向きの問題は解決されました:-)

#mapDiv のオプションの CSS は次のとおりです。

  #mapDiv {
     width: 100%;
     height: 300px;
     margin: auto;
     -moz-box-shadow: 1px 2px 12px #999999;
     -webkit-box-shadow: 1px 2px 12px #999999;
     border-radius: 8px;
   }
于 2012-08-19T13:32:27.807 に答える
-1

このスタイルを追加すると、divが回転します

div
{
  transform:rotate(7deg);
  -ms-transform:rotate(7deg); /* IE 9 */
  -moz-transform:rotate(7deg); /* Firefox */
  -webkit-transform:rotate(7deg); /* Safari and Chrome */
  -o-transform:rotate(7deg); /* Opera */
}

<div style="transform:rotate(90deg); -ms-transform:rotate(90deg); /* IE 9 */ -moz-transform:rotate(90deg); /* Firefox */ -webkit-transform:rotate(90deg); /* Safari and Chrome */ -o-transform:rotate(90deg); /* Opera */" class="map">
        <iframe width="80%" height="50%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/?ie=UTF8&amp;ll=39.6846,-104.88802&amp;spn=0.088114,0.209255&amp;t=m&amp;z=13&amp;output=embed">
        </iframe>
    </div>
于 2012-08-19T13:39:55.623 に答える