Карты Google v3: кластеризация с CustomOverlays

Я искал об этом в течение нескольких дней. Я даже загрузил MarkerClustererPlus версии 3 от Гэри Литтла, но так и не смог разобраться. Подойдет любая помощь.

Ниже представлены customOverlays на моих точках. вы можете видеть, что они накладываются друг на друга при уменьшении масштаба. Мне нужно создавать кластеры, когда они находятся на близком расстоянии.

function CustomMarker(latlng, map, args) {
    this.latlng = latlng;   
    this.args = args;   
    this.setMap(map);   
}

CustomMarker.prototype = new google.maps.OverlayView();

CustomMarker.prototype.draw = function() {

    var _this = this;
    var div = this.div;

    if (!div) {

        div = this.div = document.createElement('div');
        var ul = document.createElement('ul');

        ul.className = 'marker-stack';

        div.className = 'custom-marker';
        div.style.position = 'absolute';
        div.style.cursor = 'pointer';


        div.appendChild(ul);

        if (typeof(_this.args.marker_id) !== 'undefined') div.dataset.marker_id =               _this.args.marker_id;
        if (typeof(_this.args.marker_category) !== 'undefined') div.dataset.marker_category =   _this.args.marker_category;
        if (typeof(_this.args.marker_title) !== 'undefined') div.dataset.marker_title =         _this.args.marker_title;
        if (typeof(_this.args.marker_position) !== 'undefined') div.dataset.marker_position =   _this.args.marker_position;

        var panes = this.getPanes();
        panes.overlayImage.appendChild(div);
    }

    var point = this.getProjection().fromLatLngToDivPixel(this.latlng);

    if (point) {
        div.style.left = (point.x - div.offsetWidth / 2 ) + 'px';
        div.style.top = (point.y - div.offsetHeight ) - 8 + 'px';
    }
};

CustomMarker.prototype.remove = function() {
    if (this.div) {
        this.div.parentNode.removeChild(this.div);
        this.div = null;
    }   
};

CustomMarker.prototype.getPosition = function() {
    return this.latlng; 
};


for (i = 0; i < locations.length; i++) {
    place = locations[i];
    myLatLng = new google.maps.LatLng(place.latitude, place.longitude);

    var overlay = new CustomMarker(myLatLng, map, {
        marker_id: place.id,
        marker_category: place.category,
        marker_title: place.name,
        marker_position: place.latitude +','+ place.longitude
    });

    bounds.extend(myLatLng);
    markers.push(marker);
}

var cluster = new MarkerClusterer(map, markers, clusterOptions);

MarkerClusterer(map, markers, clusterOptions); не работает, потому что это не маркеры. они являются CustomOverlays.

Это пользовательские наложения на майских точках

Любая дополнительная помощь будет делать.


person Adewale George    schedule 13.11.2015    source источник
comment
Предоставьте минимальный, полный, проверенный и удобочитаемый пример, демонстрирующий проблему.   -  person geocodezip    schedule 14.11.2015