jquery-ui-map 和 MarkerClusterPlus => 获取点击事件（在 markerCluster 上）并触发另一个事件答案

【问题标题】：jquery-ui-map and MarkerClustererPlus => Get Click Event (on markerCluster) and fire another eventjquery-ui-map 和 MarkerClusterPlus => 获取点击事件（在 markerCluster 上）并触发另一个事件
【发布时间】：2013-01-31 09:08:04
【问题描述】：

我有一个项目，使用 jquery-map-ui 和 MarkerClustererPlus。

一切都按应有的方式工作 - 但缺少一件事：

每当地图中心发生变化（dragend）时，我都会通过 Ajax 重新加载结果（标记），并在地图下方显示 10 个最佳条目的经典结果列表（针对“非视觉用户”）。

当用户单击标记群集按钮时，我希望发生同样的事情（地图中心和缩放已更改，但我无法对此进行处理以触发我自己的事件（重新加载最佳结果基于新地图中心的列表）...

所以问题是：当有人单击 ClusterMarker 并重新定位地图时，如何启动我的功能......不幸的是，dragend 事件在这里不起作用。还玩过markerClusterer“点击”功能，但没有让它工作:-(

这是我现在正在使用的……基于： http://code.google.com/p/jquery-ui-map/ 和 http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/docs/reference.html

更新：基本上我正在寻找关于如何嵌入函数的可能性/建议，如下所示http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/examples/events_example.html 进入我的代码：

$(function() 
{ 
    getMarkersByLatitudeAndLongitude(); //call function to load map and markers on initial load

    $('#map').gmap().bind('init', function(event, map) 
    { 
        $(map).dragend(function() 
        {
            getMarkersByLatitudeAndLongitude(); //reload Map and Markers, if Map has been moved
        });

        $(map).addEventListener('zoom_changed', function() 
        {
      var initial_zoom = $('#map').gmap('option', 'zoom'); //reload Map & Markers, if Zoom level has been changed and if we need more results
      var new_zoom = $("#map").gmap('get', 'map').getZoom();
      if(new_zoom<=initial_zoom )   getMarkersByLatitudeAndLongitude(); 
        }); 
    });

    function getMarkersByLatitudeAndLongitude()
    {
        var latlng  = $("#map").gmap('get', 'map').getCenter();
        var zoom        = $("#map").gmap('get', 'map').getZoom();
        var i           = 0;
        $('#map').gmap('closeInfoWindow'); // close any open info window
        $('#map').gmap('clear', 'markers'); // remove all markers
        $('#map').gmap('get', 'MarkerClusterer').clearMarkers(); //remove all cluster markers

    //get results to be display via json
        $.getJSON( '/code/get_json_data.php', { 'latitude': latlng.lat(), 'longitude': latlng.lng() ,'zoom': zoom }, function(data) 
        { 
            if(data)
            {
                $.each( data.markers, function(i, marker) 
                {
                    if(i<10) 
                    {
                        for_list    = for_list  + "|" + marker.id ; //remember the first 10 markers to be display in Details Results List under the Map
                        i++;
                    }
          $('#map').gmap('addMarker', 
                    { 
                        'position': new google.maps.LatLng(marker.la, marker.lo),
                        'icon':marker.m,
                        'title':marker.n,
            'bounds':false  
                    })
                    .click(function()
                    {
                        var content = load_content(marker.f);
                        $('#map').gmap('openInfoWindow',{ 'content': content}, this); // get Marker Content on Click. function load_content gets the content via Ajax
                    });
                });

        // let Marker Clusterer do his work
                $('#map').gmap('set', 'MarkerClusterer', new MarkerClusterer($('#map').gmap('get', 'map'), $('#map').gmap('get', 'markers'), {
            'maxZoom':12,   
          'gridSize': 45, 
          'title':'Click to zoom in'
        })); 


                //Load an generate the Detail List
        $.post('/code/get_details_for_list.php', { list: for_list } , function(data) {
                    $('#detail_list').html(data);
                });

                // add Marker for center position
        $('#map').gmap('addMarker', 
                { 
                    'position': latlng.lat() + ',' + latlng.lng(),
                    'icon'      : '/code/geo/images/gmap_pin_blue.png',
                    'title'   : 'Center of your Search'
                });
            }
        });
    }

高度赞赏任何正确方向的提示。如果我能够在 markerClusterer 点击事件之后提醒新的地图中心坐标就足够了。

感谢您的帮助！

【问题讨论】：

标签： jquery google-maps onclick markerclusterer jquery-ui-map

【解决方案1】：

您必须将 MarkerCluster 作为参数提供给 google.maps.event.addListener

google.maps.event.addListener(
      $('#map').gmap('get', 'MarkerClusterer'),
      'click',
      function(){
      alert('click on cluster');
    });

【讨论】：

试过了，但我没有成功......应该在哪里调用？还尝试了 jquery-ui-map "version": $('#map').addEventListener($('#map').gmap('get', 'MarkerClusterer'),'click', function(){ alert ('点击集群'); });
集群创建完成后，您可以在某处调用它。我的代码使用了错误的选择器（#map_canvas 而不是#map）。已修复，请重试。
已修复（之前也是如此）但无法正常工作......我想这是因为我在这里也使用 jquery-ui-maps
如果你喜欢，你也可以看到现场版本......你在柏林，我在慕尼黑......
服务！给我看现场版（我确信我的建议有效）

【解决方案2】：

好的，可以使用“解决方法”。

我在 markercluster.js 文件中添加了一个函数调用到这个函数中：google.maps.event.addDomListener(this.div_, "click", function (e) { .....

我的函数调用会根据新的地图中心更新我的列表。

也许不是最聪明的解决方案，但它确实有效......

【讨论】：