Есть ли исправление ошибки изменения положения прокрутки в Google Maps Info Windows? - PullRequest
0 голосов
/ 05 августа 2020

Я реализовал Google Maps на сайте, используя стандартные встроенные функции Info Windows (https://developers.google.com/maps/documentation/javascript/infowindows). Когда InfoWindow закрывается нажатием на «X» в верхнем правом углу, window.scrollY изменяется на высоту InfoWindow, если вы не на самом верху (window.scrollY == 0) . Вот jsfiddle, который я обнаружил при поиске в Google проблемы, которая, при небольшом изменении, хорошо показывает проблему.

$(function () {
    demoMap = {
        initMap: function () {
            var myLatlng = new google.maps.LatLng(41.097905, -73.405006);
            var myOptions = {
                zoom: 16,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            this.map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            this.addMarker();
        },

        addMarker: function () {
            var self = this;
            var contentString = "<div id='content'>";
            contentString += "<div id='title'>Mr. Frosty's Deli and Grill</div>";
            contentString += "<div id='info'><p>10 1st Street</p><p>Norwalk, CT 06855</p><p>(203) 956-5767</p><p><a href='http://thebeachburger.com/'>thebeachburger.com‎</a></p></div></div>";

            var latlng = this.map.getCenter();

            var marker = new google.maps.Marker({
                position: latlng,
                map: this.map,
                title: "Mr. Frosty's Deli and Grill"
            });

            var infowindow = new google.maps.InfoWindow({
                content: contentString,
                disableAutoPan: true               
            });

            google.maps.event.addListener(marker, 'mouseover', function () {
                infowindow.setOptions({pixelOffset : self.getInfowindowOffset(self.map, marker)});
                infowindow.open(self.map, marker);
            });
            google.maps.event.addListener(marker, 'mouseout', function () {                
                infowindow.close();
            });
        },

        getInfowindowOffset: function (map, marker) {
            var center = this.getPixelFromLatLng(map.getCenter()),
                point = this.getPixelFromLatLng(marker.getPosition()),
                quadrant = "",
                offset;
            quadrant += (point.y > center.y) ? "b" : "t";
            quadrant += (point.x < center.x) ? "l" : "r";            
            if (quadrant == "tr") {
                offset = new google.maps.Size(-70, 185);
            } else if (quadrant == "tl") {
                offset = new google.maps.Size(70, 185);
            } else if (quadrant == "br") {
                offset = new google.maps.Size(-70, 20);
            } else if (quadrant == "bl") {
                offset = new google.maps.Size(70, 20);
            }

            return offset;
        },

        getPixelFromLatLng: function (latLng) {
            var projection = this.map.getProjection();          
            var point = projection.fromLatLngToPoint(latLng);
            return point;
        }
    }

    demoMap.initMap();
})();

http://jsfiddle.net/svigna/SJCNp/

Если вы добавите немного высоты к основному тексту (например, 2000 пикселей) и прокрутите немного от верхнего края страницы, затем щелкните закрытое окно InfoWindow, оно переместится вниз по странице на точную высоту InfoWindow. Я предполагаю, что это как-то связано с тем фактом, что Google полностью удаляет элементы из DOM, когда вы их закрываете, вместо того, чтобы просто использовать классы CSS для отображения / отмены отображения windows.

Я просмотрел inte rnet для ответа, но кажется, что никто этого не заметил или никого не волнует, так как это своего рода небольшая проблема. Единственное решение, которое я мог придумать, - это противодействие изменению scrollY с помощью window.scrollTo в противоположном направлении по высоте InfoWindow (я не мог получить фактический узел элемента InfoWindow для измерения его текущего offsetHeight, поэтому мне пришлось заставить все Информация Windows, чтобы указать c высоту, чтобы установить ту же высоту в моем JS).

1 Ответ

1 голос
/ 07 августа 2020

Эта ошибка сводит меня с ума, я рад, что я не одинок :)

Это не супер элегантно, но я заметил, что этого не происходит, когда я запускал infowindow.close() вручную, только когда я на самом деле нажал кнопку закрытия по умолчанию. В конце концов, я спрятал кнопку закрытия, добавил свою собственную с помощью infowindow.setContent() и использовал ее, чтобы закрыть информационное окно.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...