谷歌地图v3:使用CustomOverlays进行群集

时间:2015-11-13 21:06:49

标签: javascript google-maps google-maps-api-3 markerclusterer

我好几天都在搜索这个。我甚至已经下载了Gary Little的v3 MarkerClustererPlus,但仍然无法弄明白。任何帮助都可以。

以下是我的观点上的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。

These are custom overlays on may points

任何进一步的帮助都可以。

0 个答案:

没有答案