谷歌地圖不正確的用戶界面顯示，也是地圖是偏移一些偏移

我想顯示一個谷歌地圖內部的div，這是在第一個隱藏的外部div。當顯示外部div切換時，地圖的初始化被觸發。在初始化函數中，「google.maps.event.trigger（gMap，'resize'）;」用來。谷歌地圖不正確的用戶界面顯示，也是地圖是偏移一些偏移

我是一個新註冊的用戶，而不能發佈任何圖像，所以這裏是小提琴：http://jsfiddle.net/Pd72p/

HTML：

<div id="main"> 
    <div id="opt"> 
     <div class="bar"> 
      &#x25bc Info1 
     </div> 
     <div class="description"> 
      <p>Info1</p> 
      <div class="bttn">Learn more</div> 
     </div> 
     <div class="bar"> 
      &#x25bc Info2 
     </div> 
     <div class="description"> 
      <p>Info2</p> 
      <div id="map"></div> 
      <div class="bttn">Learn more</div> 
     </div> 
    </div> 
</div>

CSS：

.hidden{ 
display:none; 
} 

#opt{ 
margin:0; 
padding:0; 
/*width:80%;*/ 
} 
#opt div{ 
margin:2%; 
padding:1%; 
width:96%; 
} 
#opt .bar{ 
background-color:#ffc933; 
} 
#opt .bar:hover, #opt .description .bttn:hover{ 
background-color:#55ee55; 
cursor:pointer; 
} 
#opt .description{ 
border-top:dotted; 
border-bottom:dotted; 
} 

#opt .description .bttn{ 
margin:20px 0px 0px 0px; 
padding:10px; 
width:100px; 
background-color:#ffa822; 
text-align:center; 
border-radius:5px; 
} 

#map{ 
width:200px; 
height:200px; 
}

JS ：

"use strict"; 

$(function(){ 
    $('#opt .description').addClass('hidden'); 
    $('#opt .bar').click(function(){ 
     $(this).next().slideToggle(); 
     if ($('#map').is(':visible')) 
     { 
      initializeMap(); 
     } 
    }); 
}); 


function initializeMap() { 

    // default location 
    var initialLatLng = new google.maps.LatLng(33.4500, -112.0667); 

    var mapOptions = { 
     center: initialLatLng, 
     zoom: 13, 
     //disableDefaultUI: true, 
     mapTypeId: google.maps.MapTypeId.SATELLITE 
    }; 
    var gMap = new google.maps.Map(document.getElementById("map"), mapOptions); 

    var gMarker = new google.maps.Marker({ 
     position: initialLatLng, 
     map: gMap}); 

    google.maps.event.trigger(gMap, 'resize'); 
} 
//google.maps.event.addDomListener(window, 'load', initializeMap);

直接包含地圖的div將寬度和高度都設置爲500px（在小提琴中，我將其設置爲200px）。所以首先，它應該是一個方形。但現在它是一個矩形。更改CSS只會改變高度，但寬度始終顯示爲相同。

其次，左上角偏移右側和底部的正向偏移量。

第三，UI控件顯示不正確。他們是一團糟，當我試圖拖動地圖時也會導致問題。如果我使用disableDefaultUI：true，拖動問題就會消失。

所以我想看看是否有任何機構可以幫助我獲得它的工作。

謝謝！

來源

2014-07-06 ywtk

股利，而你可以」 t post張圖片，你可以肯定地張貼代碼，並鏈接到http://jsfiddle.net/與你的相關嘗試 –

@FélixGagnon-Grenier剛剛更新 – ywtk

它認爲CSS

#opt div{ 
    margin:2%; 
    padding:1%; 
    width:96%; 
}

它適用於一些地圖元素，你可以使用

#opt > div{ 
    margin:2%; 
    padding:1%; 
    width:96%; 
}

或把一個類你想改變

來源

2014-07-06 23:31:24 ngleich

谷歌地圖不正確的用戶界面顯示，也是地圖是偏移一些偏移

回答

相關問題