Расположите информационное окно Gmaps так, чтобы карта не панорамировалась.


Я хочу изменить текущее поведение моей Карты Google, чтобы она отображала информационное окно при наведении курсора мыши и открывала определенную ссылку при нажатии. Отображение информационного окна не является проблемой, но теперь проблема заключается в том, что центр карты изменится, если информационное окно не помещается в текущий div; что означает, что положение маркера изменится, и он больше не будет «наводиться мышью», а информационное окно исчезнет.

Я пытаюсь создать такое же поведение, как, например: http://www.booking.com/city/nl/amsterdam.html?sid=de243c5062b6be49f9a67baa38992974;city=-2140479

imho есть 2 решения, которые я могу придумать, которые помогут;

  1. вычисление положения маркера и позиционирование информационного окна на основе этого
  2. Не позволять карте менять положение при отображении информационного окна, но это будет означать, что в некоторых случаях информационное окно может быть невидимым, что не идеально.

В данном примере они не используют google.maps.Marker() для добавления маркеров, а добавляют div, используя собственный код.

createMarker: function (d, g, n, l, e, m) {
    var i = this.b_map_icons[e];
    var b = (i.height) ? i.height : 20;
    var h = (i.width) ? i.width : 17;
    var f = i.iconAnchor[0];
    var a = (i.zOrder) ? i.zOrder : 20;
    var k = g - i.iconAnchor[1];
    var o = (e == "cluster") ? '<div class="ml-text">' + m + "</div>" : "";
    var c = "display:block;width:" + h + "px;height:" + b + "px;left:" + (d - f) + "px;top:" + k + "px;position:absolute;cursor:pointer;z-index:" + (a + 1) + ";";
    var j = $('<div class="marker marker_type_' + e + '" id="' + n + '" style="' + c + '">' + o + '<img alt="' + l + '" src="' + i.image + '" style="position:absolute;top:0px;left:0px;z-index:12000;" /></div>');
    return j
},

Предпочтительно, чтобы информационное окно располагалось на основе положения маркера, чтобы оно всегда отображалось на текущей карте, возможно ли это?


google-maps google-maps-api-3 google-maps-markers
person Richard    schedule 03.04.2011    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Да, вполне возможно, просто добавьте прослушиватель событий к маркеру:

 google.maps.event.addListener(marker, 'mouseover', function () {
       info.open(map, this.position);
 });

Вышеизложенное взято из решения, которое я написал, но я думаю, вы поняли картинку :) просто используйте позицию маркера (this.position)

ИЗМЕНИТЬ:

После просмотра вашего примера мне пришло в голову, что вам вообще не нужно информационное окно, вам нужен настраиваемый оверлей, который по сути является элементом DOM с координатами в нем.

Документация

person Kenneth Jakobsen    schedule 04.04.2011
comment
Нельзя ли разместить информационное окно на холсте карты? Как уже говорилось, использование пользовательского наложения сделает его видимым за пределами холста и, следовательно, невидимым. Моя главная цель - отобразить информационное окно внутри холста без изменения карты внутри холста, чтобы наведение курсора на маркер оставалось. - person Richard; 06.04.2011
comment
Это очень возможно, вы можете разместить информационное окно там, где хотите, но в приведенном примере я почти уверен, что они не используют информационные окна. Вы также можете просто добавить обычный элемент dom, расположенный в соответствии с мышью, в примере mouseevent в моем ответе и снова удалить его при отключении мыши. - person Kenneth Jakobsen; 07.04.2011