jquery google map 插件，添加事件监听器答案

【问题标题】：Jquery google map plugin, adding event listenersjquery google map 插件，添加事件监听器
【发布时间】：2012-05-17 18:12:27
【问题描述】：

谁能解释 google jquery.ui.map插件中的以下代码sn-p（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);
    };
});

还有我们如何将回调函数绑定到地图对象上的点击事件，我尝试了以下方法，但 event 没有 latLng 属性：

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

提前致谢。

【问题讨论】：

标签： jquery google-maps-api-3 callback addeventlistener jquery-ui-map

【解决方案1】：

您已经回答了自己的问题 :) 如果您想将事件绑定到您的 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 有很好的使用示例，您可以从中学到很多东西:)

【讨论】：

我知道如何使用 google maps API 添加事件监听器，我只是想解释一下 jquery 代码（用于学习目的），因为我看不懂。
使用 AddEvenListener 是因为事件不是以标准的 Javascript/jQuery 方式处理的。您需要通读 Google Maps API 以查看差异。从我链接的网站：“这些事件可能看起来像标准 DOM 事件，但它们实际上是 Maps API 的一部分。因为不同的浏览器实现不同的 DOM 事件模型，所以 Maps API 提供了这些机制来侦听和响应 DOM 事件，而无需需要处理各种跨浏览器特性。这些事件通常还会在事件中传递参数，记录一些 UI 状态（例如鼠标位置）。"

【解决方案2】：

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

我不会使用插件，因为它会限制你的工作。尝试阅读如何自己创建地图。

【讨论】：

【解决方案3】：

sn-p 代码覆盖了一些 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() {

});

【讨论】：

这会阻止我在另一个对象上触发 .click() 事件。我该如何解决这个问题？
有没有一种快速的方法可以将其限制为仅捕获实际地图上的事件，而不窃取页面中的所有其他事件？
如果其他人有这个问题，请参阅我的答案以获得可能的解决方案。

【解决方案4】：

我发现从页面中窃取所有事件并将它们重新分配给地图会导致委托事件不再起作用。例如，如果您尝试trigger() 单击另一个元素，它就不起作用。例如- 为on("click") 设置事件侦听器仍然有效，它不会再侦听以编程方式触发的点击。

我已经更改了我自己的文件副本上的代码。这是以防万一有人感兴趣。将函数的“名称”更改为在前面添加“map”，并将原方法的第一个字母大写：

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

【讨论】：