旋转谷歌地图嵌入在html中

Rotating google map embedded in html

本文关键字：html 谷歌地图 旋转      更新时间：2023-09-26

我将制作一个应用程序，该应用程序具有显示嵌入式Google地图的特殊部分。起初一切正常，但是当我向后旋转设备时，地图超出了定义的宽度并丢失了其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;}
  }

Heh :-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的评论，我像这样使用谷歌地图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;
   }

添加此样式将旋转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>
相关文章：