我要评论谷歌地图,点聚合,所使用的js
function markerclusterer(map, opt_markers, opt_options) {
this.extend(markerclusterer, google.maps.overlayview);
this.map_ = map;
/**
* @type {array.<google.maps.marker>}
* @private
*/
this.markers_ = [];
/**
* @type {array.<cluster>}
*/
this.clusters_ = [];
this.sizes = [53, 56, 66, 78, 90];
/**
* @private
*/
this.styles_ = [];
/**
* @type {boolean}
* @private
*/
this.ready_ = false;
var options = opt_options || {};
/**
* @type {number}
* @private
*/
this.gridsize_ = options['gridsize'] || 60;
/**
* @private
*/
this.minclustersize_ = options['minimumclustersize'] || 2;
/**
* @type {?number}
* @private
*/
this.maxzoom_ = options['maxzoom'] || null;
this.styles_ = options['styles'] || [];
/**
* @type {string}
* @private
*/
this.imagepath_ = options['imagepath'] ||
this.marker_cluster_image_path_;
/**
* @type {string}
* @private
*/
this.imageextension_ = options['imageextension'] ||
this.marker_cluster_image_extension_;
/**
* @type {boolean}
* @private
*/
this.zoomonclick_ = true;
if (options['zoomonclick'] != undefined) {
this.zoomonclick_ = options['zoomonclick'];
}
/**
* @type {boolean}
* @private
*/
this.averagecenter_ = false;
if (options['averagecenter'] != undefined) {
this.averagecenter_ = options['averagecenter'];
}
this.setupstyles_();
this.setmap(map);
/**
* @type {number}
* @private
*/
this.prevzoom_ = this.map_.getzoom();
// add the map event listeners
var that = this;
google.maps.event.addlistener(this.map_, 'zoom_changed', function() {
// determines map type and prevent illegal zoom levels
var zoom = that.map_.getzoom();
var minzoom = that.map_.minzoom || 0;
var maxzoom = math.min(that.map_.maxzoom || 100,
that.map_.maptypes[that.map_.getmaptypeid()].maxzoom);
zoom = math.min(math.max(zoom,minzoom),maxzoom);
if (that.prevzoom_ != zoom) {
that.prevzoom_ = zoom;
that.resetviewport();
}
});
google.maps.event.addlistener(this.map_, 'idle', function() {
that.redraw();
});
// finally, add the markers
if (opt_markers && (opt_markers.length || object.keys(opt_markers).length)) {
this.addmarkers(opt_markers, false);
}
}
/**
* the marker cluster image path.
*
* @type {string}
* @private
*/
markerclusterer.prototype.marker_cluster_image_path_ = '../images/m';
/**
* the marker cluster image path.
*
* @type {string}
* @private
*/
markerclusterer.prototype.marker_cluster_image_extension_ = 'png';
/**
* extends a objects prototype by anothers.
*
* @param {object} obj1 the object to be extended.
* @param {object} obj2 the object to extend with.
* @return {object} the new extended object.
* @ignore
*/
markerclusterer.prototype.extend = function(obj1, obj2) {
return (function(object) {
for (var property in object.prototype) {
this.prototype[property] = object.prototype[property];
}
return this;
}).apply(obj1, [obj2]);
};
/**
* implementaion of the interface method.
* @ignore
*/
markerclusterer.prototype.onadd = function() {
this.setready_(true);
};
/**
* implementaion of the interface method.
* @ignore
*/
markerclusterer.prototype.draw = function() {};
/**
* sets up the styles object.
*
* @private
*/
markerclusterer.prototype.setupstyles_ = function() {
if (this.styles_.length) {
return;
}
for (var i = 0, size; size = this.sizes[i]; i++) {
this.styles_.push({
url: this.imagepath_ + (i + 1) + '.' + this.imageextension_,
height: size,
width: size
});
}
};
/**
* fit the map to the bounds of the markers in the clusterer.
*/
markerclusterer.prototype.fitmaptomarkers = function() {
var markers = this.getmarkers();
var bounds = new google.maps.latlngbounds();
for (var i = 0, marker; marker = markers[i]; i++) {
bounds.extend(marker.getposition());
}
this.map_.fitbounds(bounds);
};
/**
* sets the styles.
*
* @param {object} styles the style to set.
*/
markerclusterer.prototype.setstyles = function(styles) {
this.styles_ = styles;
};
/**
* gets the styles.
*
* @return {object} the styles object.
*/
markerclusterer.prototype.getstyles = function() {
return this.styles_;
};
/**
* whether zoom on click is set.
*
* @return {boolean} true if zoomonclick_ is set.
*/
markerclusterer.prototype.iszoomonclick = function() {
return this.zoomonclick_;
};
/**
* whether average center is set.
*
* @return {boolean} true if averagecenter_ is set.
*/
markerclusterer.prototype.isaveragecenter = function() {
return this.averagecenter_;
};
/**
* returns the array of markers in the clusterer.
*
* @return {array.<google.maps.marker>} the markers.
*/
markerclusterer.prototype.getmarkers = function() {
return this.markers_;
};
/**
* returns the number of markers in the clusterer
*
* @return {number} the number of markers.
*/
markerclusterer.prototype.gettotalmarkers = function() {
return this.markers_.length;
};
/**
* sets the max zoom for the clusterer.
*
* @param {number} maxzoom the max zoom level.
*/
markerclusterer.prototype.setmaxzoom = function(maxzoom) {
this.maxzoom_ = maxzoom;
};
/**
* gets the max zoom for the clusterer.
*
* @return {number} the max zoom level.
*/
markerclusterer.prototype.getmaxzoom = function() {
return this.maxzoom_;
};
/**
* the function for calculating the cluster icon image.
*
* @param {array.<google.maps.marker>} markers the markers in the clusterer.
* @param {number} numstyles the number of styles available.
* @return {object} a object properties: 'text' (string) and 'index' (number).
* @private
*/
markerclusterer.prototype.calculator_ = function(markers, numstyles) {
var index = 0;
var count = markers.length;
var dv = count;
while (dv !== 0) {
dv = parseint(dv / 10, 10);
index++;
}
index = math.min(index, numstyles);
return {
text: count,
index: index
};
};
/**
* set the calculator function.
*
* @param {function(array, number)} calculator the function to set as the
* calculator. the function should return a object properties:
* 'text' (string) and 'index' (number).
*
*/
markerclusterer.prototype.setcalculator = function(calculator) {
this.calculator_ = calculator;
};
/**
* get the calculator function.
*
* @return {function(array, number)} the calculator function.
*/
markerclusterer.prototype.getcalculator = function() {
return this.calculator_;
};
/**
* add an array of markers to the clusterer.
*
* @param {array.<google.maps.marker>} markers the markers to add.
* @param {boolean=} opt_nodraw whether to redraw the clusters.
*/
markerclusterer.prototype.addmarkers = function(markers, opt_nodraw) {
if (markers.length) {
for (var i = 0, marker; marker = markers[i]; i++) {
this.pushmarkerto_(marker);
}
} else if (object.keys(markers).length) {
for (var marker in markers) {
this.pushmarkerto_(markers[marker]);
}
}
if (!opt_nodraw) {
this.redraw();
}
};
/**
* pushes a marker to the clusterer.
*
* @param {google.maps.marker} marker the marker to add.
* @private
*/
markerclusterer.prototype.pushmarkerto_ = function(marker) {
marker.isadded = false;
if (marker['draggable']) {
// if the marker is draggable add a listener so we update the clusters on
// the drag end.
var that = this;
google.maps.event.addlistener(marker, 'dragend', function() {
marker.isadded = false;
that.repaint();
});
}
this.markers_.push(marker);
};
/**
* adds a marker to the clusterer and redraws if needed.
*
* @param {google.maps.marker} marker the marker to add.
* @param {boolean=} opt_nodraw whether to redraw the clusters.
*/
markerclusterer.prototype.addmarker = function(marker, opt_nodraw) {
this.pushmarkerto_(marker);
if (!opt_nodraw) {
this.redraw();
}
};
/**
* removes a marker and returns true if removed, false if not
*
* @param {google.maps.marker} marker the marker to remove
* @return {boolean} whether the marker was removed or not
* @private
*/
markerclusterer.prototype.removemarker_ = function(marker) {
var index = -1;
if (this.markers_.indexof) {
index = this.markers_.indexof(marker);
} else {
for (var i = 0, m; m = this.markers_[i]; i++) {
if (m == marker) {
index = i;
break;
}
}
}
if (index == -1) {
// marker is not in our list of markers.
return false;
}
marker.setmap(null);
this.markers_.splice(index, 1);
return true;
};
/**
* remove a marker from the cluster.
*
* @param {google.maps.marker} marker the marker to remove.
* @param {boolean=} opt_nodraw optional boolean to force no redraw.
* @return {boolean} true if the marker was removed.
*/
markerclusterer.prototype.removemarker = function(marker, opt_nodraw) {
var removed = this.removemarker_(marker);
if (!opt_nodraw && removed) {
this.resetviewport();
this.redraw();
return true;
} else {
return false;
}
};
/**
* removes an array of markers from the cluster.
*
* @param {array.<google.maps.marker>} markers the markers to remove.
* @param {boolean=} opt_nodraw optional boolean to force no redraw.
*/
markerclusterer.prototype.removemarkers = function(markers, opt_nodraw) {
var removed = false;
for (var i = 0, marker; marker = markers[i]; i++) {
var r = this.removemarker_(marker);
removed = removed || r;
}
if (!opt_nodraw && removed) {
this.resetviewport();
this.redraw();
return true;
}
};
/**
* sets the clusterer's ready state.
*
* @param {boolean} ready the state.
* @private
*/
markerclusterer.prototype.setready_ = function(ready) {
if (!this.ready_) {
this.ready_ = ready;
this.createclusters_();
}
};
/**
* returns the number of clusters in the clusterer.
*
* @return {number} the number of clusters.
*/
markerclusterer.prototype.gettotalclusters = function() {
return this.clusters_.length;
};
/**
* returns the google map that the clusterer is associated with.
*
* @return {google.maps.map} the map.
*/
markerclusterer.prototype.getmap = function() {
return this.map_;
};
/**
* sets the google map that the clusterer is associated with.
*
* @param {google.maps.map} map the map.
*/
markerclusterer.prototype.setmap = function(map) {
this.map_ = map;
};
/**
* returns the size of the grid.
*
* @return {number} the grid size.
*/
markerclusterer.prototype.getgridsize = function() {
return this.gridsize_;
};
/**
* sets the size of the grid.
*
* @param {number} size the grid size.
*/
markerclusterer.prototype.setgridsize = function(size) {
this.gridsize_ = size;
};
/**
* returns the min cluster size.
*
* @return {number} the grid size.
*/
markerclusterer.prototype.getminclustersize = function() {
return this.minclustersize_;
};
/**
* sets the min cluster size.
*
* @param {number} size the grid size.
*/
markerclusterer.prototype.setminclustersize = function(size) {
this.minclustersize_ = size;
};
/**
* extends a bounds object by the grid size.
*
* @param {google.maps.latlngbounds} bounds the bounds to extend.
* @return {google.maps.latlngbounds} the extended bounds.
*/
markerclusterer.prototype.getextendedbounds = function(bounds) {
var projection = this.getprojection();
// turn the bounds into latlng.
var tr = new google.maps.latlng(bounds.getnortheast().lat(),
bounds.getnortheast().lng());
var bl = new google.maps.latlng(bounds.getsouthwest().lat(),
bounds.getsouthwest().lng());
// convert the points to pixels and the extend out by the grid size.
var trpix = projection.fromlatlngtodivpixel(tr);
trpix.x += this.gridsize_;
trpix.y -= this.gridsize_;
var blpix = projection.fromlatlngtodivpixel(bl);
blpix.x -= this.gridsize_;
blpix.y += this.gridsize_;
// convert the pixel points back to latlng
var ne = projection.fromdivpixeltolatlng(trpix);
var sw = projection.fromdivpixeltolatlng(blpix);
// extend the bounds to contain the new bounds.
bounds.extend(ne);
bounds.extend(sw);
return bounds;
};
/**
* determins if a marker is contained in a bounds.
*
* @param {google.maps.marker} marker the marker to check.
* @param {google.maps.latlngbounds} bounds the bounds to check against.
* @return {boolean} true if the marker is in the bounds.
* @private
*/
markerclusterer.prototype.ismarkerinbounds_ = function(marker, bounds) {
return bounds.contains(marker.getposition());
};
/**
* clears all clusters and markers from the clusterer.
*/
markerclusterer.prototype.clearmarkers = function() {
this.resetviewport(true);
// set the markers a empty array.
this.markers_ = [];
};
/**
* clears all existing clusters and recreates them.
* @param {boolean} opt_hide to also hide the marker.
*/
markerclusterer.prototype.resetviewport = function(opt_hide) {
// remove all the clusters
for (var i = 0, cluster; cluster = this.clusters_[i]; i++) {
cluster.remove();
}
// reset the markers to not be added and to be invisible.
for (var i = 0, marker; marker = this.markers_[i]; i++) {
marker.isadded = false;
if (opt_hide) {
marker.setmap(null);
}
}
this.clusters_ = [];
};
/**
*
*/
markerclusterer.prototype.repaint = function() {
var oldclusters = this.clusters_.slice();
this.clusters_.length = 0;
this.resetviewport();
this.redraw();
// remove the old clusters.
// do it in a timeout so the other clusters have been drawn first.
window.settimeout(function() {
for (var i = 0, cluster; cluster = oldclusters[i]; i++) {
cluster.remove();
}
}, 0);
};
/**
* redraws the clusters.
*/
markerclusterer.prototype.redraw = function() {
this.createclusters_();
};
/**
* calculates the distance between two latlng locations in km.
* @see http://www.movable-type.co.uk/scripts/latlong.html
*
* @param {google.maps.latlng} p1 the first lat lng point.
* @param {google.maps.latlng} p2 the second lat lng point.
* @return {number} the distance between the two points in km.
* @private
*/
markerclusterer.prototype.distancebetweenpoints_ = function(p1, p2) {
if (!p1 || !p2) {
return 0;
}
var r = 6371; // radius of the earth in km
var dlat = (p2.lat() - p1.lat()) * math.pi / 180;
var dlon = (p2.lng() - p1.lng()) * math.pi / 180;
var a = math.sin(dlat / 2) * math.sin(dlat / 2) +
math.cos(p1.lat() * math.pi / 180) * math.cos(p2.lat() * math.pi / 180) *
math.sin(dlon / 2) * math.sin(dlon / 2);
var c = 2 * math.atan2(math.sqrt(a), math.sqrt(1 - a));
var d = r * c;
return d;
};
/**
* add a marker to a cluster, or creates a new cluster.
*
* @param {google.maps.marker} marker the marker to add.
* @private
*/
markerclusterer.prototype.addtoclosestcluster_ = function(marker) {
var distance = 40000; // some large number
var clustertoaddto = null;
var pos = marker.getposition();
for (var i = 0, cluster; cluster = this.clusters_[i]; i++) {
var center = cluster.getcenter();
if (center) {
var d = this.distancebetweenpoints_(center, marker.getposition());
if (d < distance) {
distance = d;
clustertoaddto = cluster;
}
}
}
if (clustertoaddto && clustertoaddto.ismarkerinclusterbounds(marker)) {
clustertoaddto.addmarker(marker);
} else {
var cluster = new cluster(this);
cluster.addmarker(marker);
this.clusters_.push(cluster);
}
};
/**
* creates the clusters.
*
* @private
*/
markerclusterer.prototype.createclusters_ = function() {
if (!this.ready_) {
return;
}
// get our current map view bounds.
// create a new bounds object so we don't affect the map.
var mapbounds = new google.maps.latlngbounds(this.map_.getbounds().getsouthwest(),
this.map_.getbounds().getnortheast());
var bounds = this.getextendedbounds(mapbounds);
for (var i = 0, marker; marker = this.markers_[i]; i++) {
if (!marker.isadded && this.ismarkerinbounds_(marker, bounds)) {
this.addtoclosestcluster_(marker);
}
}
};
/**
* a cluster that contains markers.
*
* @param {markerclusterer} markerclusterer the markerclusterer that this
* cluster is associated with.
* @constructor
* @ignore
*/
function cluster(markerclusterer) {
this.markerclusterer_ = markerclusterer;
this.map_ = markerclusterer.getmap();
this.gridsize_ = markerclusterer.getgridsize();
this.minclustersize_ = markerclusterer.getminclustersize();
this.averagecenter_ = markerclusterer.isaveragecenter();
this.center_ = null;
this.markers_ = [];
this.bounds_ = null;
this.clustericon_ = new clustericon(this, markerclusterer.getstyles(),
markerclusterer.getgridsize());
}
/**
* determins if a marker is already added to the cluster.
*
* @param {google.maps.marker} marker the marker to check.
* @return {boolean} true if the marker is already added.
*/
cluster.prototype.ismarkeralreadyadded = function(marker) {
if (this.markers_.indexof) {
return this.markers_.indexof(marker) != -1;
} else {
for (var i = 0, m; m = this.markers_[i]; i++) {
if (m == marker) {
return true;
}
}
}
return false;
};
/**
* add a marker the cluster.
*
* @param {google.maps.marker} marker the marker to add.
* @return {boolean} true if the marker was added.
*/
cluster.prototype.addmarker = function(marker) {
if (this.ismarkeralreadyadded(marker)) {
return false;
}
if (!this.center_) {
this.center_ = marker.getposition();
this.calculatebounds_();
} else {
if (this.averagecenter_) {
var l = this.markers_.length + 1;
var lat = (this.center_.lat() * (l-1) + marker.getposition().lat()) / l;
var lng = (this.center_.lng() * (l-1) + marker.getposition().lng()) / l;
this.center_ = new google.maps.latlng(lat, lng);
this.calculatebounds_();
}
}
marker.isadded = true;
this.markers_.push(marker);
var len = this.markers_.length;
if (len < this.minclustersize_ && marker.getmap() != this.map_) {
// min cluster size not reached so show the marker.
marker.setmap(this.map_);
}
if (len == this.minclustersize_) {
// hide the markers that were showing.
for (var i = 0; i < len; i++) {
this.markers_[i].setmap(null);
}
}
if (len >= this.minclustersize_) {
marker.setmap(null);
}
this.updateicon();
return true;
};
/**
* returns the marker clusterer that the cluster is associated with.
*
* @return {markerclusterer} the associated marker clusterer.
*/
cluster.prototype.getmarkerclusterer = function() {
return this.markerclusterer_;
};
/**
* returns the bounds of the cluster.
*
* @return {google.maps.latlngbounds} the cluster bounds.
*/
cluster.prototype.getbounds = function() {
var bounds = new google.maps.latlngbounds(this.center_, this.center_);
var markers = this.getmarkers();
for (var i = 0, marker; marker = markers[i]; i++) {
bounds.extend(marker.getposition());
}
return bounds;
};
/**
* removes the cluster
*/
cluster.prototype.remove = function() {
this.clustericon_.remove();
this.markers_.length = 0;
delete this.markers_;
};
/**
* returns the center of the cluster.
*
* @return {number} the cluster center.
*/
cluster.prototype.getsize = function() {
return this.markers_.length;
};
/**
* returns the center of the cluster.
*
* @return {array.<google.maps.marker>} the cluster center.
*/
cluster.prototype.getmarkers = function() {
return this.markers_;
};
/**
* returns the center of the cluster.
*
* @return {google.maps.latlng} the cluster center.
*/
cluster.prototype.getcenter = function() {
return this.center_;
};
/**
* calculated the extended bounds of the cluster with the grid.
*
* @private
*/
cluster.prototype.calculatebounds_ = function() {
var bounds = new google.maps.latlngbounds(this.center_, this.center_);
this.bounds_ = this.markerclusterer_.getextendedbounds(bounds);
};
/**
* determines if a marker lies in the clusters bounds.
*
* @param {google.maps.marker} marker the marker to check.
* @return {boolean} true if the marker lies in the bounds.
*/
cluster.prototype.ismarkerinclusterbounds = function(marker) {
return this.bounds_.contains(marker.getposition());
};
/**
* returns the map that the cluster is associated with.
*
* @return {google.maps.map} the map.
*/
cluster.prototype.getmap = function() {
return this.map_;
};
/**
* updates the cluster icon
*/
cluster.prototype.updateicon = function() {
var zoom = this.map_.getzoom();
var mz = this.markerclusterer_.getmaxzoom();
if (mz && zoom > mz) {
// the zoom is greater than our max zoom so show all the markers in cluster.
for (var i = 0, marker; marker = this.markers_[i]; i++) {
marker.setmap(this.map_);
}
return;
}
if (this.markers_.length < this.minclustersize_) {
// min cluster size not yet reached.
this.clustericon_.hide();
return;
}
var numstyles = this.markerclusterer_.getstyles().length;
var sums = this.markerclusterer_.getcalculator()(this.markers_, numstyles);
this.clustericon_.setcenter(this.center_);
this.clustericon_.setsums(sums);
this.clustericon_.show();
};
/**
* a cluster icon
*
* @param {cluster} cluster the cluster to be associated with.
* @param {object} styles an object that has style properties:
* 'url': (string) the image url.
* 'height': (number) the image height.
* 'width': (number) the image width.
* 'anchor': (array) the anchor position of the label text.
* 'textcolor': (string) the text color.
* 'textsize': (number) the text size.
* 'backgroundposition: (string) the background postition x, y.
* @param {number=} opt_padding optional padding to apply to the cluster icon.
* @constructor
* @extends google.maps.overlayview
* @ignore
*/
function clustericon(cluster, styles, opt_padding) {
cluster.getmarkerclusterer().extend(clustericon, google.maps.overlayview);
this.styles_ = styles;
this.padding_ = opt_padding || 0;
this.cluster_ = cluster;
this.center_ = null;
this.map_ = cluster.getmap();
this.div_ = null;
this.sums_ = null;
this.visible_ = false;
this.setmap(this.map_);
}
/**
* triggers the clusterclick event and zoom's if the option is set.
*/
clustericon.prototype.triggerclusterclick = function() {
var markerclusterer = this.cluster_.getmarkerclusterer();
// trigger the clusterclick event.
google.maps.event.trigger(markerclusterer, 'clusterclick', this.cluster_);
if (markerclusterer.iszoomonclick()) {
// zoom into the cluster.
this.map_.fitbounds(this.cluster_.getbounds());
}
};
/**
* adding the cluster icon to the dom.
* @ignore
*/
clustericon.prototype.onadd = function() {
this.div_ = document.createelement('div');
if (this.visible_) {
var pos = this.getposfromlatlng_(this.center_);
this.div_.style.csstext = this.createcss(pos);
this.div_.innerhtml = this.sums_.text;
}
var panes = this.getpanes();
panes.overlaymousetarget.appendchild(this.div_);
var that = this;
google.maps.event.adddomlistener(this.div_, 'click', function() {
that.triggerclusterclick();
});
};
/**
* returns the position to place the div dending on the latlng.
*
* @param {google.maps.latlng} latlng the position in latlng.
* @return {google.maps.point} the position in pixels.
* @private
*/
clustericon.prototype.getposfromlatlng_ = function(latlng) {
var pos = this.getprojection().fromlatlngtodivpixel(latlng);
pos.x -= parseint(this.width_ / 2, 10);
pos.y -= parseint(this.height_ / 2, 10);
return pos;
};
/**
* draw the icon.
* @ignore
*/
clustericon.prototype.draw = function() {
if (this.visible_) {
var pos = this.getposfromlatlng_(this.center_);
this.div_.style.top = pos.y + 'px';
this.div_.style.left = pos.x + 'px';
}
};
/**
* hide the icon.
*/
clustericon.prototype.hide = function() {
if (this.div_) {
this.div_.style.display = 'none';
}
this.visible_ = false;
};
/**
* position and show the icon.
*/
clustericon.prototype.show = function() {
if (this.div_) {
var pos = this.getposfromlatlng_(this.center_);
this.div_.style.csstext = this.createcss(pos);
this.div_.style.display = '';
}
this.visible_ = true;
};
/**
* remove the icon from the map
*/
clustericon.prototype.remove = function() {
this.setmap(null);
};
/**
* implementation of the onremove interface.
* @ignore
*/
clustericon.prototype.onremove = function() {
if (this.div_ && this.div_.parentnode) {
this.hide();
this.div_.parentnode.removechild(this.div_);
this.div_ = null;
}
};
/**
* set the sums of the icon.
*
* @param {object} sums the sums containing:
* 'text': (string) the text to display in the icon.
* 'index': (number) the style index of the icon.
*/
clustericon.prototype.setsums = function(sums) {
this.sums_ = sums;
this.text_ = sums.text;
this.index_ = sums.index;
if (this.div_) {
this.div_.innerhtml = sums.text;
}
this.usestyle();
};
/**
* sets the icon to the the styles.
*/
clustericon.prototype.usestyle = function() {
var index = math.max(0, this.sums_.index - 1);
index = math.min(this.styles_.length - 1, index);
var style = this.styles_[index];
this.url_ = style['url'];
this.height_ = style['height'];
// 新增了lineheight_
this.lineheight_ = style['lineheight'];
this.width_ = style['width'];
this.textcolor_ = style['textcolor'];
this.anchor_ = style['anchor'];
this.textsize_ = style['textsize'];
this.backgroundposition_ = style['backgroundposition'];
};
/**
* sets the center of the icon.
*
* @param {google.maps.latlng} center the latlng to set as the center.
*/
clustericon.prototype.setcenter = function(center) {
this.center_ = center;
};
/**
* create the css text based on the position of the icon.
*
* @param {google.maps.point} pos the position.
* @return {string} the css style text.
*/
clustericon.prototype.createcss = function(pos) {
var style = [];
style.push('background-image:url(' + this.url_ + ');');
var backgroundposition = this.backgroundposition_ ? this.backgroundposition_ : '0 0';
style.push('background-position:' + backgroundposition + ';');
if (typeof this.anchor_ === 'object') {
if (typeof this.anchor_[0] === 'number' && this.anchor_[0] > 0 &&
this.anchor_[0] < this.height_) {
style.push('height:' + (this.height_ - this.anchor_[0]) +
'px; padding-top:' + this.anchor_[0] + 'px;');
} else {
style.push('height:' + this.height_ + 'px; line-height:' + this.lineheight_ +
'px;');
}
if (typeof this.anchor_[1] === 'number' && this.anchor_[1] > 0 &&
this.anchor_[1] < this.width_) {
style.push('width:' + (this.width_ - this.anchor_[1]) +
'px; padding-left:' + this.anchor_[1] + 'px;');
} else {
style.push('width:' + this.width_ + 'px; text-align:center;');
}
} else {
style.push('height:' + this.height_ + 'px; line-height:' +
this.lineheight_ + 'px; width:' + this.width_ + 'px; text-align:center;');
}
var txtcolor = this.textcolor_ ? this.textcolor_ : 'black';
var txtsize = this.textsize_ ? this.textsize_ : 11;
style.push('cursor:pointer; top:' + pos.y + 'px; left:' +
pos.x + 'px; color:' + txtcolor + '; position:absolute; font-size:' +
txtsize + 'px; font-family:arial,sans-serif; font-weight:bold');
return style.join('');
};
发表评论