javascript – 谷歌地图嵌入动态驱动器选项卡(不是jquery-ui选项卡)

2019年8月4日 178次阅读

花了一整天阅读这个常见问题后,当主页面没有正确显示地图上的地图时,人们会使用与动态标签相关的谷歌地图的嵌入程序.地图不居中.有没有人对如何解决这个问题有任何建议,我非常愿意尝试任何事情.

我目前正在使用Dynamic Content选项卡.我想知道在我的情况下有没有办法解决这个问题.

只是网站上的一个例子.

<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="country1" class="selected">Tab 1</a></li>
<li><a href="#" rel="country2">Contacts</a></li>
<li><a href="#" rel="country3">Tab 3</a></li>
<li><a href="#" rel="country4">Tab 4</a></li>
<li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
</ul>


<div id="country1" class="tabcontent">
Tab content 1 here<br />Tab content 1 here<br />
</div> 
<div id="country2" class="tabcontent">
Tab content 1 here<br />Google Maps<br />
</div>

谷歌地图嵌入

<iframe width="400" height="425" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?ie=UTF8&q=Ace+Liquors&fb=1&gl=us&hq=ace+liquor+glendale&cid=17378010379165161653&t=m&ll=34.162084,-118.301747&spn=0.007546,0.008562&z=16&iwloc=A&output=embed"></iframe>

“联系人的个人代码”选项卡如下：

<li>
<a id="contact" rel="hours" href="#">
<span>Contact</span>
</li>

根据我的理解,我需要一个jquery代码片段,在点击Contacts时会加载地图.任何人都有任何建议强制地图只在这个事件发生时加载？

最佳答案 您在StackOverflow中提到的问题似乎不符合您的需求,因为使用了Google地图的Javascript API.

我假设使用您的标签Javascript无法计算iframe的初始宽度和高度以使其居中.

我无法使用动态内容选项卡,因为锚标签链接在演示页面中不起作用.
我已经设法在JsFiddle中使用嵌入式Google地图和纯CSS标签(http://jsfiddle.net/bKaxg/342/)

看看提供的样式,我已将iframe设置为块

.content iframe{
    margin:0 auto;
    display:block;
}

你也可以使用Twitter Bootstrap的标签(http://jsfiddle.net/K9LpL/248/)

甚至是简单易用的自定义脚本方法(http://jsfiddle.net/e3Lhc/29/)

编辑：我已设法使用提供的脚本,使用我的CSS的第一行来居中你的地图http://jsfiddle.net/DqZT8/3/

点赞