Плагин Jquery google map, добавление прослушивателей событий

Может ли кто-нибудь объяснить значение следующего фрагмента кода (jQuery.fn[name]), найденного в google jquery Плагин .ui.map:

jQuery.each(('click mousedown rightclick dblclick mouseover mouseout drag dragend').split(' '), function(i, name) {
    jQuery.fn[name] = function(a, b) {
        return this.addEventListener(name, a, b);
    };
});

А также, как мы могли бы привязать функцию обратного вызова к событию щелчка на объекте карты, я пробовал следующее, но event не имеет атрибута latLng:

$('#map_canvas').gmap().click(function(event) {
        alert(event.latLng);
    });

Заранее спасибо.


jquery addeventlistener google-maps-api-3 callback jquery-ui-map
person Dilini Rajapaksha    schedule 09.05.2012    source источник

Ответы (4)


arrow_upward
6
arrow_downward

Этот фрагмент кода перезаписывает некоторые методы jQuery, поэтому его можно использовать с некоторыми объектами Google Maps. Например.

    var map = $('#map_canvas').gmap('get', 'map')
    $(map).click(function() {
        var self = this; // this is the map object
    });

    $('#map_canvas').gmap('addMarker', { ... }).click(function() {
        var self = this; // this refers to the marker object
    }).hover(function() {
         var self = this; // this refers to the marker object
    });

Если вам нужно связать другие события, такие как zoom_changed, просто

var map = $('#map_canvas').gmap('get', 'map');
$(map).addEventListener('zoom_changed', function() {

});
person johansalllarsson    schedule 18.05.2012
comment
Это мешает мне вызвать событие .click() для другого объекта. Как я могу это исправить? - person Sean Kendle; 08.08.2015
comment
Есть ли быстрый способ ограничить это, чтобы фиксировать события только на реальной карте, без кражи всех других событий со страницы? - person Sean Kendle; 10.08.2015
comment
Если у кого-то еще есть эта проблема, посмотрите мой ответ для возможного решения. - person Sean Kendle; 10.08.2015

arrow_upward
1
arrow_downward

Вы сами ответили на свой вопрос :) Если вы хотите привязать события к своей карте Google, вам придется использовать this.addEventListener(name, a, b); (на самом деле это фрагмент кода, который позволяет выполнять функции для определенных событий. См. ниже)

Пример:

 google.maps.event.addListener(my_map_object, 'click', function() {
    my_map_object.setZoom(8);
    alert("I've just zoomed by clicking the map!");
 });

Вы можете добавлять события к объекту карты или любым маркерам, которые вы ставите на карту.

См. https://developers.google.com/maps/documentation/javascript/events для полного объяснения. У Google Maps API есть хорошие примеры использования, из них можно многому научиться :)

person Flater    schedule 09.05.2012
comment
Я знал, как добавить список событий с помощью API карт Google, мне просто нужно было объяснение кода jquery (для целей обучения), так как я не мог его понять. - person Dilini Rajapaksha; 10.05.2012
comment
AddEvenListener используется, потому что события не обрабатываются стандартным способом Javascript/jQuery. Вам нужно будет прочитать Google Maps API, чтобы увидеть разницу. С сайта, на который я ссылался: эти события могут выглядеть как стандартные события DOM, но на самом деле они являются частью API Карт. Поскольку разные браузеры реализуют разные модели событий DOM, Maps API предоставляет эти механизмы для прослушивания событий DOM и реагирования на них без необходимости обработки различных особенностей разных браузеров. Эти события также обычно передают аргументы внутри события, отмечая некоторое состояние пользовательского интерфейса (например, положение мыши). - person Flater; 12.05.2012

arrow_upward
1
arrow_downward 

google.maps.event.addListener(marker, 'mouseover', function() {
 $('.hover_div').html('<a target="_blank" href="'+marker.url+'">'+marker.hover + marker.title +'</a>').show();
});

or

    google.maps.event.addListener(marker, 'click', function() {
      window.open(
  marker.url,
  '_blank' // <- This is what makes it open in a new window.
);

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

person BoqBoq    schedule 09.05.2012

arrow_upward
0
arrow_downward

Я обнаружил, что кража всех событий со страницы и переназначение их на карту приводит к тому, что делегированные события больше не работают. Например, если вы попытаетесь trigger() щелкнуть другой элемент, это не сработает. например - Там, где настройка прослушивателя событий для on("click") все еще работает, он больше не будет прослушивать программно запущенный щелчок.

Я изменил код в своей собственной копии файла. Вот, если кому интересно. Он меняет «имена» функций, добавляя «карту» впереди и делая первую букву исходного метода заглавной:

click() меняется на mapClick, dragend меняется на mapDragend и т. д.

jQuery.each(('click rightclick dblclick mouseover mouseout drag dragend').split(' '), function (i, name) {
        jQuery.fn["map" + name[0].toUpperCase() + name.substr(1)] = function (a, b) {
            return this.addEventListener(name, a, b);
        }
});
person Sean Kendle    schedule 10.08.2015