Информационное окно Google Map API v3 не отображается при наведении курсора мыши или щелчке по многоугольнику

Я пытаюсь отображать динамические данные в информационных окнах всякий раз, когда пользователь наводит курсор на полигоны на карте. Отладка показывает, что с данными и другими настройками информационного окна/многоугольника все в порядке. Я могу получить изменение цвета при наведении курсора, просто информационные окна не отображаются. Что может быть причиной этого? Что мне здесь не хватает?

statePolygon = new google.maps.Polygon({
    paths: stateBorderCoords,
    strokeColor: '#f33f00', 
    strokeOpacity: 1, 
    strokeWeight: 1,
    fillColor: '#ff0000', 
    fillOpacity: 0.2
});

statePolygon.pId = infoText; // Fetching from a JSON response
statePolygon.wPet = wPet;    // Fetching from a JSON response
statePolygon.infoWindow = new google.maps.InfoWindow();

google.maps.event.addListener(statePolygon,"mouseover",function(event){
    this.setOptions({fillColor: "#00FF00"});
    this.infoWindow.setPosition(event.latLng);
    this.infoWindow.setContent(this.wPet);
    this.infoWindow.open(map, this);
});

google.maps.event.addListener(statePolygon,"mouseout",function(){
    this.setOptions({fillColor: "#FF0000"});
    this.infoWindow.close();
});

google.maps.event.addListener(statePolygon, 'click', function(){
    //createInfoWindow(this.pId);
});

statePolygon.setMap(map);

google-maps-api-3 infowindow polygons
person axiomtheorem    schedule 25.05.2012    source источник
comment
createInfoWindow() может показаться важным. Не могли бы вы добавить определение этой функции, пожалуйста?   -  person Andrew Leach    schedule 25.05.2012

Ответы (2)


arrow_upward
4
arrow_downward

Что произойдет, если вы опустите «это» в строке:

this.infoWindow.open(map, this);

?

Последние несколько дней я боролся с чем-то подобным и только что обнаружил, что мой код работает для google.maps.Markers (как в булавках Google), но не для google.maps.Circles (и, я думаю, google.maps.Polygons).

Мое предположение: "infoWindow.open(map, object)", который пытается привязать InfoWindow к object, похоже, работает только для google.maps.Markers, а не для Circles, Polygons и т. д. Что кажется для работы "open(map)", который ни к чему не привязывается. Однако позиция infoWindow должна быть явно установлена ​​(что вы уже делаете).

Изменить:

В моем случае это не работает (при условии, что глобальная карта переменных)

var circle = { clickable: true,
               strokeColor: "darkred",
               strokeOpacity: 1,
               strokeWeight: 1,
               fillColor: "green",
               fillOpacity: 1,
               map: map,
               center: new google.maps.LatLng(55.95,-3.19),
               radius: 45
            };
var marker1 = new google.maps.Circle(circle);

infoWindow = new google.maps.InfoWindow();
infoWindow.setContent("Hello");
inoWindow.setPosition(new google.maps.LatLng(55.95,-3.19));
infoWindow.open(map,marker1);

но это делает:

var circle = { clickable: true,
               strokeColor: "darkred",
               strokeOpacity: 1,
               strokeWeight: 1,
               fillColor: "green",
               fillOpacity: 1,
               map: map,
               center: new google.maps.LatLng(55.95,-3.19),
               radius: 45
            };
var marker1 = new google.maps.Circle(circle);

infoWindow = new google.maps.InfoWindow();
infoWindow.setContent("Hello");
infoWindow.setPosition(new google.maps.LatLng(55.95,-3.19));
infoWindow.open(map);

Единственная разница в последней строке.

Думая о приведенном выше сообщении, установка позиции после открытия, по-видимому, перезаписывает позицию привязки и, таким образом, делает ее видимой.

person pacrook    schedule 25.05.2012
comment
Возможно, функция createInfoWindow() добавляет к полигону информационное окно. Это может сделать this.infoWindow действительным, поэтому я и спросил об этом. Но вы правы: обычно у полигонов этого нет. - person Andrew Leach; 25.05.2012
comment
Привет, Эндрю, добавьте поле infoWindow в многоугольник, чтобы сделать код действительным, но, по моему опыту, даже в этом случае infoWindow остается упорно невидимым или за пределами экрана/карты... - person pacrook; 25.05.2012
comment
Дох! google.maps.Circle и google.maps.Polygon не имеют метода getPosition() или свойства position, в отличие от google.maps.Marker. Итак, мое обновленное предположение заключается в том, что использование infoWindow.open(map,object) приводит к тому, что позиция infoWindow не определена и, следовательно, не отображается. - person pacrook; 25.05.2012

arrow_upward
0
arrow_downward

Сначала вы открываете InfoWindow, затем устанавливаете его положение:

http://jsfiddle.net/fuDfa/

google.maps.event.addListener(statePolygon,"mouseover",function(event){
    this.setOptions({fillColor: "#00FF00"});
    this.infoWindow.setContent(this.wPet);
    this.infoWindow.open(map);
    this.infoWindow.setPosition(event.latLng);
});

Однако я понял, что если мышь перемещается поверх InfoWindow (даже если она находится поверх многоугольника), это будет считаться перемещением мыши за пределы многоугольника. Итак, полигон станет красным, а информационное окно закроется. Но поскольку мышь все еще находится внутри полигона, информационное окно снова откроется, вызывая мерцание.

Я не знаю, как обойти это (пробовал тайм-аут, но это тоже ненадежно). Думал только поставить Infowindow в предустановленное положение вместо event.latLng.

person Heitor Chang    schedule 25.05.2012
comment
Согласен. Это работает, но единственная проблема заключается в том, что если мышь указывает на границы многоугольника, происходит непрерывное мерцание. В любом случае спасибо. По крайней мере, у меня есть отправная точка для дальнейшей работы над этим. - person axiomtheorem; 28.05.2012
comment
Я использую тот же метод и также сталкиваюсь с проблемой «мерцания». Если у кого-то есть решение, было бы здорово его услышать. - person FajitaNachos; 18.06.2013