1 
    <a class="showmap" href="#">Show map</a>
<div id="map" style="height: 400px; width: 400px;"> </div>
<script type="text/javascript">
$(function() { 
 //initialise map
});

$(document).ready(function(){
    $('.showmap').click(function(){
    $("#map").slideToggle();
    google.maps.event.trigger(map, 'resize');
   });
});
</script>

私はあなたが今までに言うことができると確信しています。Googleマップのオンとオフを切り替えようとしています。問題は、このサイトで showMap ボタンをクリックした後のマップが次のように表示されることです。

http://forum.jquery.com/viewImage.do?fileId=14737000003424984&forumGroupId=14737000000003003

誰かが私が間違っていることを指摘できますか? div全体にマップを表示したい。その写真の下部を見ると、マップのコピーライトとブランド stff が正しい場所にあるのに、マップがそうではないことがわかります。イベントがdivの一番下に移動することはありません。ジャンプして写真の位置に戻ります。

4

1 に答える 1

1

サイズ変更の呼び出しが早すぎるようです。代わりにこれを試してください：

$("#map").slideToggle('slow', function() {
    google.maps.event.trigger(map, 'resize');
});

これにより、スライドのトグルが終了した後にサイズ変更関数が呼び出されます。

上記が機能しない場合、回避策として、マップ div を別の div 内に囲み、オーバーフローを非表示にしてから、マップ div の代わりに親 div をスライド トグルします。

于 2013-05-13T13:29:23.450 に答える