18

私は JS を初めて使用し、以前の質問に対する回答を見つけて、新しい質問が発生し、再びここに来ました。

Google Map API を含む Reveal Modal があります。ボタンをクリックすると、Reveal Modal がポップアップし、Google マップが表示されます。私の問題は、マップの 3 分の 1 しか表示されていないことです。これは、サイズ変更トリガーを実装する必要があるためです。私の質問は、google.maps.event.trigger(map, 'resize') をどのように実装すればよいですか? この小さなコード スニペットをどこに配置すればよいでしょうか。

ここに私のテストサイトがあります。Google マップ ボタンをクリックして、目前の問題を確認します。 http://simplicitdesignanddevelopment.com/Fannie%20E%20Zurb/foundation/contact_us.html#

Reveal Model スクリプト:

<script type="text/javascript">
  $(document).ready(function() {
  $('#myModal1').click(function() {
  $('#myModal').reveal();
       });
          });
 </script>

私のGoogleマップスクリプト:

<script type="text/javascript">
 function initialize() {
 var mapOptions = {
 center: new google.maps.LatLng(39.739318, -89.266507),
 zoom: 5,
 mapTypeId: google.maps.MapTypeId.ROADMAP
 };
 var map = new google.maps.Map(document.getElementById("map_canvas"),
 mapOptions);
 }

 </script>

Google マップを保持する div:

  <div id="myModal" class="reveal-modal large">
  <h2>How to get here</h2>
  <div id="map_canvas" style="width:600px; height:300px;"></div>
  <a class="close-reveal-modal">&#215;</a>
 </div>

更新 2018-05-22

Mapバージョン 3.32 の Maps JavaScript API の新しいレンダラー リリースでは、サイズ変更イベントはクラスの一部ではなくなりました。

ドキュメントの状態

地図のサイズを変更すると、地図の中心が固定されます

  • フルスクリーン コントロールが中央を保持するようになりました。

  • サイズ変更イベントを手動でトリガーする必要はなくなりました。

ソース: https://developers.google.com/maps/documentation/javascript/new-renderer

google.maps.event.trigger(map, "resize");バージョン 3.32 以降では効果がありません

4

5 に答える 5

20

実際、ソース コードにはいくつかの問題がありました。

  • initialize()関数は作成されますが、呼び出されません
  • jQueryがロードされた$(document).ready後に呼び出す必要があります
  • はmapグローバル変数（@Cristiano Fontesが言ったように）であり、var map
  • (重要)clickイベントが呼び出されることはありません。ダイアログを開くためにReveal from Zurbが提供する2 つのメソッドを組み合わせようとしています(1 つは JS を使用し、もう 1 つは HTML のみを使用します)。唯一の JS メソッドを使用する必要があります。
  • 間違った ID を使用しています (#myModal1は HTML にはありません)。

次に、ソリューションをダウンロードします(次回はダウンロード/JSFiddle を提供してください。これを自分で作成する必要はありません)。

それが役に立ったことを願っています！

于 2012-10-25T10:05:47.507 に答える
11

ここに追加するだけ

<script type="text/javascript">
  $(document).ready(function() {
  $('#myModal1').click(function() {
  $('#myModal').reveal();
  google.maps.event.trigger(map, 'resize');
       });
          });
 </script>

ただし、マップをグローバル変数として配置する必要があるため、ここで変数を失います

<script type="text/javascript">
   function initialize() {
     var mapOptions = {
      center: new google.maps.LatLng(39.739318, -89.266507),
      zoom: 5,
      mapTypeId: google.maps.MapTypeId.ROADMAP
     };
 --> map = new google.maps.Map(document.getElementById("map_canvas"),
   mapOptions);
 }

 </script>
于 2012-10-24T22:56:23.710 に答える
5 
google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
                google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
                    google.maps.event.trigger(map, 'resize');
                });
});
于 2014-03-05T08:31:25.453 に答える
3

最後の回答にコメントを残す方法が見つかりませんでしたが、クリスティアーノ・フォンテスの助けに+1! 出来た。私の場合：

<script type="text/javascript">    

$('div.map-box').hide();
$('li.map').mouseover(function(){
    $('div.map-box').show();
    google.maps.event.trigger(map, 'resize');
});

</script>
于 2013-07-15T19:38:15.257 に答える