У меня есть карта Google с маркерами на ней. Когда пользователь нажимает на маркер, боковая панель открывается, добавляя класс к элементу боковой панели.Слушайте только на ТОЛЬКО на карте Google Maps embed

Теперь я хочу скрыть боковую панель, когда пользователь нажимает где-то на карте.

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

Маркера слушатель событий: maps.event.addListener(marker, 'click', markerClicked);

Карты события слушатель: maps.event.addListener(map, "click", function() {

Как я могу обнаружить щелчок только карту?

--- EDIT ---

Allright, некоторый код по запросу:

Для каждого маркера я добавить к карте Активирую прослушиватель событий нажмите так: google.maps.event.addListener(marker, 'click', markerClicked);

Функция markerClicked содержит следующий код, который открывает боковую панель:

var markerClicked = function() { 
    $('.sidebar--slide-in').addClass('sidebar--slide-in-active'); 
};

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

google.maps.event.addDomListener(map, "click", function() { 

});

Маркер нажмите слушатель работает как шарм. Когда маркер щелкнут, он возвращает маркер щелчка. При щелчке по карте ничего не происходит.

Однако, при нажатии на карту кликер события клика по карте возвращает объект при щелчке по карте, а также при нажатии маркера.

При нажатии на карту (не при нажатии маркера!) Я хочу закрыть боковую панель. Как мне это сделать?

--- EDIT 2 ---

Я не упомянул ли я использовать пользовательские маркеры. Я думал, что это никак не повлияло на проблему. Кажется, это так. Я скопировал codepen из @Dekel и добавил в него свой пользовательский маркер.

http://codepen.io/nieknijland/pen/QKyaxw

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

источник

2016-09-05 Niek Nijland

Добавить код, который демонстрирует проблему, иначе вопрос скорее всего будет закрыт. Вы не новичок в SO, вы уже должны это знать! – Dekel

Какой код вы хотите? Я просто хочу знать, можно ли прослушивать клик даже при прослушивании только при нажатии на карту. Не при нажатии маркера или любого другого элемента в Google Maps. Я понимаю, что мне нужно добавить код нормально, но не в этом случае я думаю :) –

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

Вы можете проверить этот пример:
http://codepen.io/anon/pen/dpoqPK

Это код (не работает в сниппет)

<!DOCTYPE html> 
<html> 
    <head> 
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
     <meta charset="utf-8"> 
     <title>Simple markers</title> 
     <style> 
      html, body { 
      height: 100%; 
      margin: 0; 
      padding: 0; 
      } 
      #map { 
      height: 100%; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="map"></div> 
     <script> 
      function initMap() { 
       var myLatLng = {lat: -25.363, lng: 131.044}; 

       var map = new google.maps.Map(document.getElementById('map'), { 
        zoom: 4, 
        center: myLatLng 
       }); 

       var marker = new google.maps.Marker({ 
        position: myLatLng, 
        map: map, 
        title: 'Hello World!' 
       }); 

       google.maps.event.addListener(marker, 'click', function() { 
        alert('Marker clicked') 
       }); 

       google.maps.event.addDomListener(map, "click", function() { 
        alert('Map clicked') 
       }); 
      } 
     </script> 
     <script async defer 
     src="https://maps.googleapis.com/maps/api/js?callback=initMap"> 
     </script> 
    </body> 
</html>

Убедитесь, чтобы добавить слушателя событий на карте после карта инициализируется

Обновление

Если вы используете пользовательский маркер, и вы хотите, чтобы предотвратить click событие на карте при нажатии на маркер можно добавить stopPropagation функцию события при нажатии на этот маркер:

google.maps.event.addDomListener(marker, 'click', function(event) { 
    event.stopPropagation(); 
    google.maps.event.trigger(self, 'click', event); 
});

Здесь - обновленный код:
http://codepen.io/anon/pen/RGAQdW

источник

2016-09-08 13:12:03 Dekel

Я попробовал ваше решение и выяснил, что он работает со стандартными маркерами Google Maps. Я не упоминал, что я использую специальные маркеры, потому что думал, что это не имеет значения. Однако, когда я использую пользовательские маркеры, и я нажимаю маркер, запускаются оба окна предупреждения. Я скопирую ваш код и воссоздаю проблему, тогда я снова отредактирую свой вопрос! –

Что вы подразумеваете под «пользовательскими маркерами»? Пожалуйста, укажите пример ... – Dekel

Я просто добавил копию вашего кода и добавил в нее свои пользовательские маркеры. –

Слушайте только на ТОЛЬКО на карте Google Maps embed

ответ

Обновление

Смежные вопросы