Question

我打算创建一个具有特殊功能的应用来展示嵌入式谷歌地图。起初一切都运行良好但是当我旋转我的设备时，地图超出了定义的宽度并丢失了它的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;}
  }

Answer 1

嘿嘿:-D我终于找到了解决办法：

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

Answer 2

添加此样式将旋转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>

旋转嵌入在HTML中的谷歌地图

2 个答案: