Question

我有一张谷歌地图，我使用API v3制作了一个全屏切换按钮。

问题： setCenter()中心位于地图的最左上角。其他一切都有效，如果我将坐标更改为其他内容，它实际上会改变中心点，但出于某种原因将其设置为左上角。首先使用display:none;，但如果按下按钮，我会调用resize ..

可能出现什么问题？

//JS
if( document.getElementById( 'toggle-map' ) ) {

    google.maps.event.addDomListener( document.getElementById( 'toggle-map' ), 'click', function() {

        jQuery( '.spinner' ).fadeIn();

        jQuery( '#map-wrapper' ).toggleClass( 'fullscreen' );
        jQuery( 'body' ).toggleClass( 'locked' );
        jQuery( '.main-wrapper' ).toggleClass( 'locked' );

        map.setZoom( 5 );
        map.setCenter( new google.maps.LatLng( 50, 50 ) );

        google.maps.event.addListenerOnce( map, 'idle', function() {

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

            jQuery( '.spinner' ).fadeOut( 800 );
        });
    });
}

//CSS
.fullscreen {
    display: block !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 10;
}
.locked {
    position: fixed;
    height: 100%;
    overflow: hidden;
    width: 100%;
    z-index: 9999;
    top: 0;
}

Answer 1

修正：添加setCenter() AFTER 'resize'事件。

中心点位于最左上角

1 个答案: