2

我将制作一个应用程序，它有一个特殊的部分来显示嵌入式谷歌地图。起初一切正常但是当我旋转我的设备时，地图超出了定义的宽度并失去了它的 css 类（它不能应用我使用的 220px 的宽度）。

{ // 无论如何，当我触摸地图时，它会正常，它会达到它的宽度 // } { // 我正在使用 Twitter Bootstrap // }

我的这个大问题的解决方案是什么？

我正在等待您的友好答复。

这是嵌入的谷歌地图：

    <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

呵呵 :-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 的评论，我使用了这样的谷歌地图 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 回答