0

jquery-map-ui と MarkerClustererPlus を使用するプロジェクトがあります。

すべてが正常に機能しますが、1 つ欠けています。

マップ センターが変更されるたびに (dragend)、Ajax を介して結果 (マーカー) をリロードし、マップの下に 10 個のベスト エントリの従来の結果リストを表示します (「非視覚ユーザー」向け)。

ユーザーがマーカークラスターボタンをクリックしたときに同じことが起こるようにしたいと思います（マップセンターとズームは変更されますが、これを処理して自分のイベントを発生させることはできません（に基づいて最良の結果リストをリロードします）新しいマップ センター) ...

質問は次のとおりです: 誰かが ClusterMarker をクリックしてマップが再センタリングされたときに、どうすれば機能を開始できますか? 残念ながら、dragond イベントはここでは機能しません。また、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 クリック イベントの後に新しいマップ センターの座標をアラートすることができれば、それで十分でしょう。

ご協力いただきありがとうございます！

4

2 に答える 2

0

MarkerClusterer を引数として指定する必要がありますgoogle.maps.event.addListener

google.maps.event.addListener(
      $('#map').gmap('get', 'MarkerClusterer'),
      'click',
      function(){
      alert('click on cluster');
    });
于 2013-01-31T10:03:55.927 に答える