0

我有一个项目，它使用 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 点击事件之后提醒新的地图中心坐标就足够了。

谢谢你的帮助！

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 回答
0

好的，让它与“解决方法”一起工作。

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

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

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

于 2013-01-31T13:11:36.437 回答