jquery-ui-map и MarkerClustererPlus => Получить событие Click (на markerCluster) и запустить другое событие

У меня есть проект, в котором используются 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'
                });
            }
        });
    }

Любая подсказка в правильном направлении высоко ценится. Было бы достаточно, если бы мне удалось предупредить новые координаты Map Center после события click markerClusterer.

Спасибо за вашу помощь!


person Christian K.    schedule 31.01.2013    source источник


Ответы (2)


Вы должны предоставить MarkerClusterer в качестве аргумента для google.maps.event.addListener

google.maps.event.addListener(
      $('#map').gmap('get', 'MarkerClusterer'),
      'click',
      function(){
      alert('click on cluster');
    });
person Dr.Molle    schedule 31.01.2013
comment
Пробовал, но у меня не получилось... где это должно называться? Также попробовал версию jquery-ui-map: $('#map').addEventListener($('#map').gmap('get', 'MarkerClusterer'),'click', function(){ alert(' нажмите на кластер'); }); - person Christian K.; 31.01.2013
comment
Вы можете вызвать его где-нибудь, как только кластеризатор будет создан. В моем коде используется неправильный селектор (#map_canvas вместо #map). Исправлено, попробуйте еще раз. - person Dr.Molle; 31.01.2013
comment
исправил это (также раньше), но не будет работать ... Я думаю, это потому, что я также использую jquery-ui-maps здесь - person Christian K.; 31.01.2013
comment
Если хотите, можете посмотреть и живую версию... Вы в Берлине, я в Мюнхене... - person Christian K.; 31.01.2013
comment
Сервус! покажите мне live-версию (я уверен, что мое предложение работает) - person Dr.Molle; 01.02.2013

Хорошо, сработало с «обходным путем».

Я добавил вызов функции в файл markercluster.js в эту функцию: google.maps.event.addDomListener(this.div_, "click", function (e) { .....

Мой вызов функции обновляет мои списки на основе нового Map Center.

Может быть, не самое умное решение, но оно работает...

person Christian K.    schedule 31.01.2013