Положение Gmaps в информационном окне, чтобы карта не сдвигалась - PullRequest
Новая
       8

Положение Gmaps в информационном окне, чтобы карта не сдвигалась

0 голосов
/ 03 апреля 2011


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

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

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
},

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

1 Ответ

0 голосов
/ 04 апреля 2011

Да, это очень возможно, просто добавьте EventListener к маркеру: 

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

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

РЕДАКТИРОВАТЬ:

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

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

...