Question

有人可以请我理解为什么谷歌地图不能在fancybox中运行吗？我在下面提供了我的代码。

我的JS

var fbCloseTitle = "close",
fbNextTitle = "next",
fbPrevTitle = "previous";$(".fancybox").fancybox({
width: '90%',
height: '90%',
fixed: false,
autoSize: false,
autoCenter: true,
tpl: {
    closeBtn: '<div title="' + fbCloseTitle + '" class="fancybox-item fancybox-close"></div>',
    next: '<a title="' + fbNextTitle + '" class="fancybox-item fancybox-next"><span></span></a>',
    prev: '<a title="' + fbPrevTitle + '" class="fancybox-item fancybox-prev"><span></span></a>'
}});

我的HTML

<div class="cul center apear floatL">

 <div class="verticalLine"></div>
    <figure class="diamond relative"> <a class="fancybox fancybox.iframe" href="https://maps.google.com/maps?q=big%20smile%20creative+Cambridge,+UK"><img class="centerAbsolute" src="img/diamond04.jpg" alt="Graphic Design In Cambridge"></a></figure>
    <h2 class="proximaBold">we work in the heart of cambridge!</h2>
    <div class="line"></div>
    <p>We are very proud of our city and we try to provide a good, honest, local service that the businesses of Cambridge can rely on. You deserve it!</p>
  </div>

我想也许我的谷歌地图网址错了，花式框工作正常，只是地图没有从谷歌地图加载。

Answer 1

当您从Google分享地图时，您实际上应该获得第二个链接（iframe标记）粘贴HTML以嵌入网站，然后提取iframe的值{{1 }}}并在你的主播src中使用它

href

然后，在您的fancybox脚本中，我建议您停用iframe <a class="fancybox fancybox.iframe" href="https://maps.google.com/maps?q=big+smile+creative+Cambridge,+UK&ie=UTF8&hq=big+smile+creative&hnear=Cambridge,+United+Kingdom&ll=52.205336,0.121817&spn=0.027297,0.084543&t=m&z=14&iwloc=A&cid=16361723521191055041&output=embed">google map</a>以避免一些已知问题，例如地图偏离中心，所以：

preload

参见 JSFIDDLE

Google地图与fancybox集成

1 个答案: