Что может быть причиной ошибки работы маркера в Google Map?

Добрый день! Пожалуйста, помогите мне решить проблему с маркером, который отвечает за отображение кастомного информационного окна. <br/> Суть проблемы заключается в том, что информационное окно появляется не только при щелчке на маркер, но также и на области, где оно скрыто до клика. <br/> В идеале, информационное окно должно открываться исключительно по клику на маркер и закрываться либо при клике на само информационное окно, либо повторно на маркер. <br/> <br/> <pre><code class="html">&lt;div class="section-map" id="map-delizioso"&gt;
    &lt;div id="map-delizioso"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre> <br/> <br/> <pre><code class="css">#map-delizioso {
    min-height: toRem(663);
    width: 100%;
}
 
.property.highlight .section-map__address{
    opacity: 1;
    scale: 1;
}
 
.property.highlight .section-map__address {
  opacity: 1;
  scale: 1
}
.section-map__address {
  background-color: var(--bgGoogleMapInfo);
  border-radius: clamp(.5rem,.35rem + .75vw,.875rem);
  box-shadow: 10px 10px 5px rgba(0,0,0,.2);
  position: relative;
  -webkit-transform: translate(-13px,-93px);
  transform: translate(-13px,-93px);
  transition: all .3s ease-out;
  opacity: 0;
  scale: 0
}
.section-map__address::after {
  position: absolute;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 24px solid var(--bgGoogleMapInfo);
  -webkit-filter: drop-shadow(4px 2px rgba(0, 0, 0, .2));
  filter: drop-shadow(4px 2px rgba(0, 0, 0, .2));
  content: "";
  height: 0;
  left: 50%
}
.address__body-col {
  padding: clamp(.5rem,.25rem + 1.25vw,1.125rem) clamp(.5rem,-.05rem + 2.75vw,1.875rem) clamp(.5rem,.25rem + 1.25vw,1.125rem) 
  • 18 октября 2024 г. 18:52
Ответы на вопрос 2
Здравствуйте! Проблема с ошибкой работы маркера в Google Maps, когда информационное окно открывается не только по клику на маркер, может быть связана с несколькими аспектами. Давайте рассмотрим некоторые наиболее распространенные причины и возможные решения.

1. **Клонирование обработчиков событий**:
   Убедитесь, что вы не добавляете несколько обработчиков событий на один и тот же маркер. Если обработчик события клика установлен несколько раз, это может привести к тому, что информационное окно будет открываться в результате нескольких одновременно выполненных событий.

   Пример того, как правильно добавить обработчик событий:
   ```javascript
   const marker = new google.maps.Marker({...});

   marker.addListener('click', function() {
       infowindow.open(map, marker);
   });
   ```

2. **Проблемы с расположением элемента**:
   Если кастомное информационное окно (или сам маркер) имеет неправильное позиционирование или размеры, это может привести к некорректному взаимодействию с событиями клика. Убедитесь, что размеры и стили вашего информационного окна правильно настроены.

3. **Обработчик клика на карте**:
   Убедитесь, что у вас нет обработчика клика на самой карте, который вызывает открытие информационного окна при клике в области, где маркер расположен. Если да, то лучше исключить такие обработчики или изменить логику таким образом, чтобы они не конфликтовали с логикой работы маркера.

   Пример неправильного подхода:
   ```javascript
   google.maps.event.addListener(map, 'click', function(event) {
       infowindow.open(map, marker); // Это может вызвать проблемы
   });
   ```

4. **Закрытие инфоокна**:
   Убедитесь, что логика закрытия работает правильно. Если вы хотите закрыть инфоокно при клике на самом маркере или на инфоокне, вам нужно учесть это:

   ```javascript
   marker.addListener('click', function() {
       if (infowindow.getMap()) {
           infowindow.close();
       } else {
           infowindow.open(map, marker);
       }
   });

   infowindow.addListener('closeclick', function() {
       infowindow.close();
   });
   ```

5. **Инициализация карты**:
   Проверьте, как и когда вы инициализируете Google Maps API и создаете маркеры и инфоокна. Убедитесь, что все выполняется в правильном порядке.

Если вы проверите вышеуказанные моменты и внесете соответствующие изменения в свой код, это может помочь решить вашу проблему с маркером и информационным окном. Если у вас есть конкретный код, который вы используете для работы с маркером и инфоокном, будет полезно предоставлять его для более точного анализа.
Я так понимаю, что эти стили используются для скрытия всплывающего окна: 
... {
  opacity: 0;
  scale: 0
}

Эти стили не удаляют элемент со страницы, и он остаётся доступным для взаимодействия. Чтобы полностью скрыть элемент, используйте display: none или visibility: hidden . Либо добавьте pointer-events: none для скрытого состояния и pointer-events: auto для видимого, чтобы сохранить анимацию.
Похожие вопросы