-2

ウェブサイトにカスタム マップを追加しようとしていますが、Google マップ API V3 を初めて使用します

問題は、マップ div 内にマップの一部のみが表示され、ブラウザのサイズを変更するか、マップの表示部分をドラッグしない限り、マップの残りの部分はすべてアンロードされたままになることです。

ここにHTMLコードがあります

 <div id="map_canvas" style="width:40%; height:1000px"></div>

そして、ここにjqueryコードがあります

function initialize() {
            var latlng = new google.maps.LatLng(57.0442, 9.9116);
            var settings = {
                zoom: 15,
                center: latlng,
                mapTypeControl: true,
                mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
                navigationControl: true,
                navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
                mapTypeId: google.maps.MapTypeId.ROADMAP};
            var map = new google.maps.Map(document.getElementById("map_canvas"), settings);


            google.maps.event.addListener(map, 'idle', function() {
                google.maps.event.trigger(map, 'resize'); 

            });

また、次のテスト リンクでお問い合わせを確認することもできます。リンクは次のとおりです。

4

1 に答える 1

1

マップは最初は表示されていないため、マップが表示されるときにマップ (または window ) のサイズ変更イベントをトリガーする必要があります。
これにより、API は不足しているタイルを強制的にロードします。

$.animate()の最後にあるのコールバックはopenSection()、これに適した場所です。

于 2013-02-23T15:11:14.633 に答える