Jquery Google Map плагин, добавление слушателей событий

Question

Может кто-нибудь объяснить смысл в следующем фрагменте кода (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); 
    }); 

Спасибо заранее.

Answer 1

Этот фрагмент кода перезаписывает некоторые из методов 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() { 

}); 

Answer 2

Вы ответили на свой вопрос :) Если вы хотите привязать события к своей карте 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. API Карт Google имеет хорошие примеры использования, вы можете многому научиться у них :)

Answer 3

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

или

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

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

Answer 4

Я обнаружил, что красть все события со страницы и переназначение их на карте причин, делегированные события больше не работают , Например, если вы попытаетесь выполнить 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); 
     } 
});