Я реализовал 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).