谷歌地圖加載偏離中心

當我嵌入一個包含全寬Google Map的頁面的iframe，並將其放置在jQuery手風琴中時，它在加載時略微偏離中心。谷歌地圖加載偏離中心

http://codepen.io/anon/pen/jqMpKp

是否有辦法防止這種情況發生？

這裏是在iframe中加載頁面的代碼： http://codepen.io/anon/pen/oxzaEJ

來源

2016-03-14 Alistair

你使用什麼瀏覽器？當我看着Chrome中的codepen時，它似乎居中。 – Starscream1984

我也在使用Chrome瀏覽器，看到這個：http：//i.imgur.com/VMDrlbH.jpg，它也離開了Firefox的中心。 – Alistair

哦，我明白了 - 我以爲你的意思是說iframe不在手風琴中央。你的意思是說谷歌地圖不是圍繞着你的銷售。你的codepen沒有太多的瞭解如何生成地圖... – Starscream1984

望着產生的谷歌地圖的代碼，你有一個硬編碼的中心點，當你生成Map對象

center: new google.maps.LatLng(53.53081624504545, -361.97108326875),

我做了地圖中心更多英國各地的中間通過改變這

center: new google.maps.LatLng(53.53081624504545, -365.97108326875),

你也許可以使用這些座標（或稍微調整它們）來使地圖完全集中在你想要的位置。

但是，更強大的方法可能是通過從所添加的所有引腳的座標計算中間點，以編程方式計算出中心。

來源

2016-03-14 12:33:12 Starscream1984

在這裏，我複製你的問題

.tab_content { 
 
    padding: 20px; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="tab4" class="tab_content"> 
 
    <iframe src="https://s3-eu-west-1.amazonaws.com/glyndebourne-ss3-dev/cinema-map.html" width="100%" height="500px" frameBorder="0"></iframe> 
 
</div> 
 

 
<button onclick="$('.tab_content').hide();">Hide iframe</button> 
 
<button onclick="$('.tab_content').fadeIn();">Show iframe</button>

您可以從CSS刪除行display: none由於顯示/隱藏由JQuery的照顧。

.tab_content { 
 
    padding: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="tab4" class="tab_content"> 
 
    <iframe src="https://s3-eu-west-1.amazonaws.com/glyndebourne-ss3-dev/cinema-map.html" width="100%" height="500px" frameBorder="0"></iframe> 
 
</div> 
 

 
<button onclick="$('.tab_content').hide();">Hide iframe</button> 
 
<button onclick="$('.tab_content').fadeIn();">Show iframe</button>

而且檢查：Javascript problem with iframe that's hidden before loaded

來源

2016-03-14 13:27:24 user2314737

谷歌地圖加載偏離中心

回答

相關問題