2

display:none;とを切り替えて Google マップを非表示/表示しようとしていdisplay:inherit;ます。Google マップに申請display:inheritすると、地図の一部が切り取られてしまい、原因がわかりません。まだ使用している間にこれを修正するにはどうすればよいdisplay:none;ですか?

例へのリンク

//HTML
<button id="toggleMap">Toggle Google Map</button>
<button id="toggleImage">Toggle Image</button>

<div id="image">
  <img src="http://jdm-digital.com/wp-content/uploads/2012/04/google-jquery-opt-465x346.jpg">
</div>

<div id="map" style="width:500px; height:500px; display:none;">
  <div id="map_canvas" style="height:100%;"></div>
</div>


//JavaScript
$('#toggleImage').click(function() {
  $('#image').css('display', 'inherit');
  $('#map').css('display', 'none');
});

$('#toggleMap').click(function() {
  $('#image').css('display', 'none');
  $('#map').css('display', 'inherit');
});
4

3 に答える 3

5

マップが非表示のときにマップを作成すると、ブラウザーがマップのサイズがゼロであると報告するため、API はマップのサイズを認識できません。API は、ゼロ サイズのマップに十分な数のタイルのみを読み込み、中心を (0,0) (左上隅) に配置します。

マップを再表示するときは、サイズ変更イベントをトリガーして新しいサイズを取得するように API に指示します。

google.maps.event.trigger(map,'resize')

ドキュメンテーション— イベントまでスクロールします。

于 2012-05-15T18:27:21.910 に答える
0

私が正しく理解していれば、display:block代わりに与えることができますdisplay:inherit

于 2012-05-15T16:19:16.223 に答える
0

私の解決策は、クリックさ$('#map').append(mapHTML);れるたびに使用することでした。#toggleMapこれにより、マップが#map表示されるたびに作成できるようになりました。

このアプローチは一種のハック的なものだと思います。誰かが別の解決策を持っているなら、私はそれについて知りたいです。

//HTML
<div id="map" style="width:500px; height:500px; display:none;"></div>


//JavaScript
$('#toggleMap').click(function() {
  $('#image').css('display', 'none');
  $('#map').css('display', 'inherit');

  var mapHTML = "<div id=\"map_canvas\" style=\"height:100%;\"></div>";
  $('#map').append(mapHTML);
  googleMap();  //Google Map's initialize() that would create the map
});
于 2012-05-15T18:20:51.690 に答える