Блог

Главная - Вопросы по программированию - Css- увеличенные карты Google в неправильном положении InfoWindow

Css- увеличенные карты Google в неправильном положении InfoWindow

#javascript #google-maps #google-maps-api-3 #google-maps-markers

#javascript #google-карты #google-maps-api-3 #google-карты-маркеры

Вопрос:

Карты Google не поддерживают 19 или 20 масштабирование в той области, где я хочу его использовать. Я пытаюсь это сделать с помощью css. Я создаю карту, добавляя событие wheel, чтобы распознать, какой пользователь уровня масштабирования включен. Если оно равно 20, я добавляю свойство css zoom к карте. Однако на этот раз infowindow создается в неправильных позициях по моему щелчку.

введите описание изображения здесь

    map = new google.maps.Map(document.getElementById("map"), {
            center: { lng: 1.393307, lat: 52.824281 },
            fullscreenControl: false,
            type: "HYBRID",
            minZoom: 8,
            maxZoom: 0,
            zoom: 5,
            gestureHandling: 'greedy',
            mapTypeId: 'hybrid',
            streetViewControl: false,
            controlSize: 27,
            mapTypeControlOptions: {
                mapTypeIds: [google.maps.MapTypeId.HYBRID, "Map"],
            },

        });

Событие колеса и класс ‘ css

 .zoom {
        zoom: 2;
    }
    
 window.addEventListener('wheel', function (event) {
            if (event.deltaY < 0) {
                if (map.getZoom() == 20) {
                    $('#map > div').eq(0).addClass("zoom");

                }
            }
            else if (event.deltaY > 0) {
                if (map.getZoom() <= 20) {
                    $('#map > div').eq(0).removeClass("zoom");

                }
            }
        });

Событие щелчка на Картах Google

 google.maps.event.addListener(map, "click", (function (mapsMouseEvent) {

            var position = mapsMouseEvent.latLng;
                infowindow.setPosition(position);
            infowindow.setContent("test");
            infowindow.open(map);
        }));

Jsfiddle live test здесь; https://jsfiddle.net/mylayf/ubeaL9s2/13

Комментарии:

1. Пожалуйста, ответьте здесь..

2. @geocodezip Не могли бы вы взглянуть сюда, пожалуйста?

Ответ №1:

Делая это:

 .zoom {
   zoom: 2;
}

Вы меняете размер контейнера. Но увеличение карты выполняется путем загрузки данных нового слоя. При умножении размера контейнера изображения будут больше (вместе с кнопками и т. Д.), Но это не загружает новый слой. Таким образом, переднее окно и контейнер будут иметь сдвиг. Например, если вы используете масштабирование 2, переднее окно будет составлять 1/4 увеличенного фонового изображения, а если вы нажмете посередине, оно будет точно в правом нижнем углу фонового изображения.

Так что просто измените maxZoom: 0 на что-то вроде maxZoom: 30 . Он загрузит изображения с максимальным разрешением (равным maxZoom: 18). Если этого недостаточно для вашей, на этой карте больше нет разрешения, и вам нужно переключиться на другого поставщика карт с большим количеством слоев для масштабирования.