Question

当我嵌入包含全宽Google地图的iframe页面并将其放在jQuery手风琴中时，当它加载时，它稍微偏离中心。

有没有办法防止这种情况发生？

以下是iframe中加载的页面代码： http://codepen.io/anon/pen/oxzaEJ

Answer 1

查看生成Google地图的代码，生成Map对象时，您有一个硬编码的中心点

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

我将地图中心更改为英国中部，将其更改为

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

您可以使用这些坐标（或略微调整它们）以使地图准确居中于您想要的位置。

但是，一种更强大的方法可能是通过从你添加的所有引脚的坐标计算中间点来以编程方式计算中心。

Answer 2

我在这里转载了您的问题

＆＃13;

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

＆＃13;

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

＆＃13;

您可以从CSS中删除行display: none，因为显示/隐藏由JQuery负责。

＆＃13;

.tab_content {
  padding: 20px;
}

＆＃13;

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

＆＃13;

同时检查：Javascript problem with iframe that's hidden before loaded

谷歌地图偏离中心

2 个答案: