2

私はGoogleMpasApi v3を使用して、200pxの高さのdivで地図を表示しています。

<div id='propertyKaart'></div>

通常のJavaScriptでは、このdivを使用してマップを表示しています。

$(document).ready(function(){
        var map = new google.maps.Map(document.getElementById("propertyKaart"),
                    mapOptions);
                    map.setCenter(punt);
                    map.setZoom(14);
})

クラスのあるボタンをクリックして.mapPuller、チャートの高さを600pxと言うように変更したいと思います。

var mapState        
$('.mapPuller').click(function(e){
        if(mapState == 'klein'){
            $('#propertyKaart').animate({height: '600px'}, 200);
            mapState = 'groot'

        }else{
            $('#propertyKaart').animate({height: '200px'}, 200);
            mapState = 'klein';

        }
         //---- here
    })

チャームのように機能しますが、問題は1つだけです。マップ（いわばタイル）は、divが200pxの高さであるとまだ考えています。

ドキュメント で、コンテナdivを変更するときにサイズ変更イベントをトリガーする必要があることがわかりました。そこで、その場で.mapPuller関数に次のコードを追加しました//------ here。

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

しかし、これは機能しません......私は何かが足りないのですか？

ブラウザウィンドウのサイズを変更すると、イベントがトリガーされ、タイルが機能しているように見えます。

4

1 に答える 1

1

jqueryのanimate関数を使用してマップのサイズを変更しようとしましたが、同じ問題が発生しました。マップタイルは適応しませんでした。しかし、マップイベントをトリガーするとresize、問題が修正されました。

したがって、スコーピングに問題がある可能性があります。map関数内で変数にアクセスできるmapPullerことを確認し、コンソールに他のエラーがないことを確認してください。

于 2012-04-26T19:09:45.493 に答える