4

div で Drupal コードを使用してマップを印刷できます。この地図をファンシーボックスの中に表示し、ウェブサイトでは非表示にしたいと考えています。なんとかできました（fancyboxは正常に動作します）が、マップが正しく表示されません-ナビゲーションがなく、マップ内に灰色の空の領域しかありません（Googleロゴはありますが）。ここで何が間違っているのか誰にも分かりますか? ID が 1 つの要素のみをレンダリングするため、背景のみをレンダリングし、残りは無視される可能性があると思いますが、正直なところ、わかりません (代わりにクラスを使用します)。アドバイスをいただければ幸いです。ありがとう

私のコード:

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

現在の出力 -出力

4

2 に答える 2

5

Google マップが非表示で初期化されたdiv場合 (タブを使用する場合と同じケースになる可能性がありますdisplay:none) width、問題 (バグ?) のheightよう0です。

インライン マップが表示されている場合、fancybox はその寸法を計算できるため、 を削除すると機能しますdisplay:none。

ファンシーボックスが既に開かれている場合、マップがファンシーボックスの寸法に収まるように、回避策としてマップのサイズを変更する必要があります。onCompleteそのためにコールバックを使用できます。

その他の注意事項:

  • セレクターに css ディメンションがあるかどうかに応じて、またはautoDimensionsいずれかを設定する必要がある場合があります(そうでない場合は に設定し、そうでない場合は に設定します)。マップをインラインで表示できるため、初期値は になります。truefalse#mapcontainerfalsetruetrue
  • インライン コンテンツ (fancybox v1.3.x) を使用しているため、このバグに注意してください。同じリンクにも回避策が示されています。

ファンシーボックスのカスタム スクリプトは次のようになります。

 $("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
 });

使用している Google Maps API のバージョンによって、地図のサイズを変更する方法が異なる場合があります。

詳細については、 https://stackoverflow.com/a/2590049/1055987を確認してください。

更新：ここにデモを追加しました

于 2012-06-05T20:32:25.377 に答える
0

hideContentOnClickパラメータです。そのパラメータを に設定してみてくださいfalse。

于 2012-06-05T03:53:34.127 に答える