manually draw a cluster with markerclusterer for maps v3
Hey I'm using the popular markerclusterer plugin for google maps that can be found at http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js
I'm wondering what function I can use to manually add a clustermarker, since I would like, when I zoom out a lot, to cluster the markers serverside before sending a huge load of json over the wire.
What function is called to add a clustermarker?
Any hel开发者_开发问答p is much appreciated
Due to the lack of any other answer, I made an extension of the MarkerClusterer myself, I'm sure it can be rewritten to a better standard, but this is what I could come up with:
MarkerClusterer.prototype.AddCluster = function(clat, clng, csize)
{
var clusterlocation = new google.maps.LatLng(clat, clng)
var CI = new ClusterIcon(new Cluster(this), this.getStyles, this.getGridSize());
var index = 0;
var dv = csize;
while (dv !== 0) {
dv = parseInt(dv / 10, 10);
index++;
}
var style = this.styles_[index-1];
CI.setCenter(clusterlocation);
$.extend(CI, {sums_ : {text : csize, index: index}, url_ : style['url'], width_ : style['width'], height_ : style['height']});
CI.setMap(this.map_);
CI.show();
CI.triggerClusterClick = function()
{this.map_.setCenter(clusterlocation);
this.map_.setZoom(this.map_.getZoom()+1); }
}
I adapted @Jakob's code for the Google Maps API V3. Hope if can help somebody.
MarkerClusterer.prototype.A
ddCluster = function(clat, clng, csize)
{
this.setZoomOnClick(false);
if (typeof this.aAddClusterIcons == "undefined"){
this.aAddClusterIcons = [];
}
this.activeMap_ = this.getMap();
var clusterlocation = new google.maps.LatLng(clat, clng)
var CI = new ClusterIcon(new Cluster(this), this.getStyles, this.getGridSize());
var index = 0;
var dv = csize;
while (dv !== 0) {
dv = parseInt(dv / 10, 10);
index++;
}
var style = this.styles_[index-1];
$.extend(CI, {sums_ : {text : csize, index: index}, url_ : style['url'], width_ : style['width'], height_ : style['height'], anchorIcon_: [clat, clng]});
CI.setCenter(clusterlocation);
CI.setMap(this.activeMap_);
CI.show();
this.aAddClusterIcons.push(CI);
}
MarkerClusterer.prototype.RemoveClusters = function(clat, clng, csize)
{
if (typeof this.aAddClusterIcons == "undefined"){
this.aAddClusterIcons = [];
}
$.each(this.aAddClusterIcons, function(iIndex, oObj){
oObj.onRemove();
});
this.aAddClusterIcons = [];
}
If i get this right you can use the zoom_changed() event of google map object and i.e. when map.getZoom()==16 send your json request with a maxNumberOfFetchedPlaces parameter so your server can return limited number of results.Since the markerClusterer initialization is like
var markerClusterer = new MarkerClusterer(map, fetchedPlacesArray); you will have no problem.
Cheers
加载中,请稍侯......
精彩评论