jquery - 带有谷歌地图的 JQuery FancyBox

Question

我可以在 div 中使用 Drupal 代码打印地图。我希望这张地图出现在一个精美的盒子里并隐藏在网站上。我设法做到了（fancybox 工作正常），但是地图没有正确显示 - 没有导航，地图内只有灰色的空白区域（尽管有谷歌徽标）。有谁知道这里可能出了什么问题？我想可能是ID只渲染一个元素，所以它只渲染背景，其余的被忽略，但老实说我不知道​​（改用类）。任何建议表示赞赏。谢谢

我的代码：

<script type="text/javascript">
    $(document).ready(function() {

    $("a#inline").fancybox({
    'hideOnContentClick': true,
    'overlayColor'      : '#ccffee',
    'overlayOpacity'    : 0.8
    });
});

</script>

显示地图的链接：

<a id="inline" href="#mapcontainer" >
Show Map
</a>

打印地图的实际 Div（设置为可见时完美工作）

<div style="display:none">
<div id="mapcontainer">
<?php print $node->content['field_maploc']['field']['items']['#children'] ?> </div></div>

PHP 代码生成以下 html：

<div style="width: auto; height: 400px;" id="openlayers-container-openlayers-map-auto-id-0" class="openlayers-container openlayers-container-preset-question_map"> <div style="width: auto; height: 400px;" id="openlayers-map-auto-id-0" class="openlayers-map openlayers-preset-question_map"></div> </div> 

当前输出 -

Answer 1

这似乎是一个问题（错误？）当谷歌地图被初始化为隐藏div时（使用选项卡时可能是相同的情况），因为display:none可能将其width和设置height为0.

当内联地图可见时，fancybox 能够计算其尺寸，因此当您移除display:none.

解决方法应该是在fancybox 已经打开后调整地图的大小，以便地图适合fancybox 的尺寸。您可以onComplete为此使用回调。

其他要记住的事情：

• 您可能需要设置autoDimensions或取决于选择器是否true具有css 尺寸（如果没有，则设置为，否则设置为。）我认为它具有尺寸，因为您可以内联显示地图，因此初始值为.false#mapcontainerfalsetruetrue
• 由于您使用的是内联内容（fancybox v1.3.x），请注意这个错误。相同的链接还显示了解决方法。

因此，您的 fancybox 自定义脚本应如下所示：

 $("a#inline").fancybox({
  'hideOnContentClick': false, // so you can handle the map
  'overlayColor'      : '#ccffee',
  'overlayOpacity'    : 0.8,
  'autoDimensions': true, // the selector #mapcontainer HAS css width and height
  'onComplete': function(){
    google.maps.event.trigger(map, "resize");
  },
  'onCleanup': function() {
   var myContent = this.href;
   $(myContent).unwrap();
  } // fixes inline bug
 });

调整地图大小的方法可能会有所不同，具体取决于您使用的谷歌地图 API 版本

您可以查看https://stackoverflow.com/a/2590049/1055987以供进一步参考。

更新：我在这里添加了一个演示

Answer 2

是hideContentOnClick参数。尝试将该参数设置为false.