コンテナのサイズを変更した後に Google マップのタイルが消えないようにするにはどうすればよいですか?

JavaScript を使用した Google マップのサイズ変更

Google マップを含む "mapwrap" div のサイズを変更すると、Google タイルが消えるという問題が発生しました。地図。この記事は、Google マップの調整をトリガーする適切な関数について説明することで、この問題の解決策を提供することを目的としています。

タイルが消えるのはなぜですか?

サイズを変更すると、" 「mapwrap」div を編集すると、Google マップは新しいサイズに自動的に調整されません。これにより、マップの寸法と表示領域の間に不一致が生じ、タイルが表示されなくなります。

解決策

これを修正するには、サイズ変更イベントを明示的にトリガーする必要があります。 Google マップ オブジェクト上。これにより、マップがレイアウトを再計算し、「mapwrap」 div の新しい寸法に調整するように指示されます。

Google Maps v3 の場合は、次の関数を使用します:

google.maps.event.trigger(map, "resize");

デモ

この概念を明確にするために、jQuery を使用したデモを次に示します。

$(function() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644)
  };
  var map = new google.maps.Map($("#map-canvas")[0], mapOptions);

  // Listen for the window resize event and trigger Google Maps to resize
  $(window).resize(function() {
    google.maps.event.trigger(map, "resize");
  });
});

この例では、ウィンドウのサイズが変更されるたびに、「マップ」内の Google マップが確実に表示されるようにします。 -canvas" div は新しいサイズに自動的に調整され、タイルが消えるのを防ぎます。

以上がコンテナのサイズを変更した後に Google マップのタイルが消えないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。