Question

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

一切都按照它应该做的方式进行 - 但缺少一件事：

每当Map Center更改（dragend）时，我都会通过Ajax重新加载结果（标记），并在Map下面显示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点击事件之后设法提醒新的Map Center坐标就足够了。

感谢您的帮助！

Answer 1

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

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

Answer 2

好的，让它使用“解决方法”。

我在markercluster.js文件中添加了一个函数调用到这个函数：google.maps.event.addDomListener（this.div_，“click”，function（e）{.....

我的函数调用基于新的Map Center更新我的列表。

也许不是最智能的解决方案，但它有效......

jquery-ui-map和MarkerClustererPlus =＆gt;获取Click事件（在markerCluster上）并触发另一个事件

2 个答案: