Question

有人可以解释 google jquery.ui.map插件中的以下代码段（jQuery.fn[name]）的含义：

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);
    };
});

以及我们如何将回调函数绑定到地图对象上的click事件，我尝试了以下内容，但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

你已经回答了自己的问题:)如果你想将事件绑定到你的谷歌地图，你将不得不使用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提供了很好的使用示例，您可以从中学到很多东西：）

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")的事件监听器仍然有效的地方，它不会再听取以编程方式触发的点击。

我已经修改了我自己的文件副本上的代码。在这里，万一有人感兴趣。它改变了＆＃34;名称＆＃34;要添加的功能＆＃34; map＆＃34;在前面，并将原始方法的第一个字母大写：

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);
        }
});

Jquery谷歌地图插件，添加事件监听器

4 个答案: