Полноэкранный контроль и поддержание центра карты

В настоящее время, кажется, что если я скажу, что порт отображения Google Maps с умеренным размером (300 пикселей на 300 пикселей) с включенным FullscreenControl, и я сосредотачиваюсь на том, что небольшое отображение карты в определенной области, например... Франция, например.. И затем я нажал кнопку полного экрана, чтобы развернуть дисплей по краям моего экрана (1920 пикселей на 1080 пикселей), Франция заправляется wayyyyy вверх в верхнем левом углу экрана.

В основном, левый верхний экран 300px x 300px перемещается в верхнюю левую часть экрана, а остальная часть карты мира простирается от этого угла на исходном уровне масштабирования.

Есть ли какой-либо способ просто настроить его так, чтобы полноэкранный режим отображался с той же центральной точкой, что и исходный дисплей, и наоборот, когда полноэкранный режим закрывается?

Переключает ли кнопка полного экрана на событие или что-нибудь, что я могу связать с setCenter?

Ответы

Ответ 1

Я сочиняю код немного странно, но он отлично работает:

<script>
    var map;
    var center = -1;
    var isFullScreen = false;
    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            zoom: 8,
            center: { lat: -34.397, lng: 150.644 }
        });
        center = { lat: map.getCenter().lat(), lng: map.getCenter().lng() };
        google.maps.event.addDomListener(map, 'bounds_changed', onBoundsChanged);
    }
    function onBoundsChanged() {
            var isFullHeight = $(map.getDiv()).children().eq(0).height() == window.innerHeight;
            var isFullWidth = $(map.getDiv()).children().eq(0).width() == window.innerWidth;
            if (isFullHeight && isFullWidth && !isFullScreen) {
                isFullScreen = true;
                map.setCenter(center);
                console.log('FULL');
            } else if (!isFullWidth||!isFullHeight){
                if (isFullScreen) {
                    map.setCenter(center);
                }
                isFullScreen = false;
                console.log('NOT-FULL');
            }
            center = { lat: map.getCenter().lat(), lng: map.getCenter().lng() };            
    }
</script>

Я использую событие bounds_changed.

Если я обнаруживаю, что карта находится в полноэкранном режиме, я устанавливаю карту в центре, которую я отмечаю в событии прецедента, и устанавливаю значение boolean в true. Если карта не находится в полноэкранном режиме, я проверяю, является ли логическое значение true, это означает, что в событии прецедента карта была в полноэкранном режиме, поэтому я возвращаю карту, а затем проверяю, является ли логическое значение ложным. В конце события я сохраняю центр в переменной для следующего события.

Все это не очень понятно...

Вы можете проконсультироваться this в Stack Overflow.

Примечание: Этот код не работает, если вы отображаете одну карту на всей странице своего веб-приложения. Я не нашел способ удалить эту ошибку. Ваши предложения очень ценятся, спасибо.

Также обратите внимание: Мой код вдохновлен ответом на прецедент. Однако вы можете найти тот же код здесь. Обратите внимание, что это не дублирующий ответ. Я добавляю в него свою часть кода.

Расскажите, есть ли у вас какие-либо вопросы или комментарии.

Ответ 2

Попробуйте это

/** To detect Map Full Screen event */
google.maps.event.addListener( map, 'bounds_changed', onBoundsChanged ); //Event listener map bound change.
var isMapFullScreen = false;
var defaultLocation = {
    lat: 27.94,
    lng: -82.45
};
function onBoundsChanged() {
    if(!isMapFullScreen){
        var isFullHeight = $(map.getDiv()).children().eq(0).height() == window.innerHeight;
        var isFullWidth= $(map.getDiv()).children().eq(0).width()  == window.innerWidth;
        if (isFullHeight && isFullWidth) {
            isMapFullScreen = true;
            myMarker.setPosition(defaultLocation);
            map.setCenter(defaultLocation);
            console.log('FULL');
        } else {
           isMapFullScreen = false; 
           console.log('NOT-FULL');
        }
    }
}