MarkerClusterer& jQuery UI Map:集群未显示

时间:2014-04-24 11:07:49

标签: google-maps-api-3 markerclusterer jquery-ui-map

我正在使用jquery-ui-map插件和markerclusterer。

从外部JSON文件加载标记。这非常适合为每个信息窗口添加标记和内容。到目前为止没问题。

jQuery,jQuery UI Map和MarkerClusterer脚本在我的文档中被正确引用。但是,我似乎无法聚类标记。

这是我的脚本来显示地图。我监督过什么吗?

$('#map_canvas').gmap().bind('init', function(event, map) {

    $.getJSON( MY_JSON_URL, function(data) {
        $.each( data.posts, function(i, marker) {
            $('#map_canvas').gmap('addMarker', { 
                'position': new google.maps.LatLng(marker.custom_fields._cmb_tatort_map_latitude, marker.custom_fields._cmb_tatort_map_longitude)
            }).click(function() {
                $('#map_canvas').gmap('openInfoWindow', { 
                    //some content here
                }, this );
            }); 
        });
    });

    $('#map_canvas').gmap('set', 'MarkerClusterer', new MarkerClusterer($('#map_canvas').gmap('get', 'map'), $('#map_canvas').gmap('get', 'markers')));

});

1 个答案:

答案 0 :(得分:1)

您需要在将标记添加到地图之后创建标记聚类器,而不是之前。

$('#map_canvas').gmap().bind('init', function(event, map) {

    $.getJSON( MY_JSON_URL, function(data) {
        $.each( data.posts, function(i, marker) {
            $('#map_canvas').gmap('addMarker', { 
                'position': new google.maps.LatLng(marker.custom_fields._cmb_tatort_map_latitude, marker.custom_fields._cmb_tatort_map_longitude)
            }).click(function() {
                $('#map_canvas').gmap('openInfoWindow', { 
                    //some content here
                }, this );
            }); 
        });
       $('#map_canvas').gmap('set', 'MarkerClusterer', new MarkerClusterer($('#map_canvas').gmap('get', 'map'), $('#map_canvas').gmap('get', 'markers')));

    });


});