события щелчка и наведения мыши в Google Maps отменяют друг друга

Question

Я работаю над картой, на которой есть несколько уже существующих полигонов.Полигоны выделены красным цветом и заполнены.

При наведении курсора мыши появляется информационное окно с заголовком многоугольника, а при наведении мыши исчезает информационное окно, что является правильным.

Я добавил прослушиватель событий щелчкатак, чтобы при щелчке многоугольник был обведен контуром и заполнен желтым для обозначения «текущего» многоугольника.

У меня есть две проблемы с событиями мыши и щелчка:

1. Еслипользователь нажимает на второй многоугольник, я хочу, чтобы первый выбранный многоугольник вернулся к исходной красной заливке / контуру.

2. Слушатель события щелчка также заставляет информационное окно появляться над выбранным многоугольником,но как только пользователь наводит указатель мыши или наводит курсор мыши на другой многоугольник, информационное окно исчезает, поскольку оно отменяется событием mouseout.Я хочу, чтобы информационное окно осталось, и затем я могу добавить z-индекс для любых других информационных окон, появляющихся при наведении мыши.

Код:

    var overlay = new google.maps.Polygon({
        paths: verticesArray,
        strokeColor: "#FF0000",
        strokeOpacity: 0.5,
        strokeWeight: 1,
        fillColor: "#FF0000",
        fillOpacity: 0.20,
        position: cent,
        map:map });

    function attachInfoWindow(overlay, number) {
      var infowindow = new google.maps.InfoWindow({ content: siteNames[number]});
      google.maps.event.addListener(overlay, 'mouseover', function() { infowindow.open(map, overlay); });
      google.maps.event.addListener(overlay, 'mouseout', function() { infowindow.close(map, overlay); });
      google.maps.event.addListener(overlay, 'click', function() {
            infowindow.open(map, overlay); 
            this.setOptions({ strokeColor: '#ffd100', fillColor:"#ffd100", fillOpacity:0.5,
      });
    });

I 'Я не очень хорошо разбираюсь в javascript и не уверен, как решить эти проблемы с событиями click и mouseout.

Пожалуйста, дайте мне знать, если требуется дополнительная информация или требуется пояснение.

MTIA.

Answer 1

Я постараюсь ответить на ваши вопросы.

1) Одна вещь, которую вы можете сделать, - это иметь глобальную переменную selectedPolygon, и каждый раз, когда пользователь нажимает Polygon, вы меняете цвет ранее выбранного Polygon,и установите переменную, указывающую на полигон, который пользователь только что нажал.Подобные вещи хорошо работали для меня в прошлом.

2) Я почти уверен, что не существует немедленного способа сказать «Не запускайте событие mouseout».Решением, хотя и не таким привлекательным, может быть заполнение глобального массива всеми информационными окнами, которые вы хотите оставить открытыми.Затем в событии mouseout вы пробегаете этот массив и проверяете, находится ли информационное окно в массиве, и если это не так, вы закрываете его.Вы должны не забыть удалить информационные окна из массива и закрыть их, когда вы больше не хотите, чтобы они отображались:)

Надеюсь, это помогло.

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

Вот небольшой пример, где я использую технику для информационного окна, чтобы убедиться, что открытое окно закрывается, если вы пытаетесь открыть новое:

var currentinfowindow = null;

function addeventlistenerinfo(marker, infowindow, i){
        google.maps.event.addListener(marker, 'click', function() {
                if (currentinfowindow)
                    currentinfowindow.close();
                infowindow.open(map,marker);
                currentinfowindow = infowindow;
            });
    }

Код состоит из двух фрагментов и состоит изглобальной переменной currentinfowindow и функции addeventlistenerinfo.

Функция просто создает EventListener для вашего маркера, и вы можете сделать это для своего оверлея.Всякий раз, когда вы запускаете событие, вы проверяете, имеет ли значение глобальная переменная, и затем выполняете процедуру, которая устанавливает цвет различных полигонов.

Это лучший пример, который я могу привести прямо сейчас.Надеюсь, это поможет прояснить ситуацию немного.