736 lines
20 KiB
JavaScript
736 lines
20 KiB
JavaScript
/**
|
|
* @name MarkerClusterer
|
|
* @version 1.0
|
|
* @author Xiaoxi Wu
|
|
* @copyright (c) 2009 Xiaoxi Wu
|
|
* @fileoverview
|
|
* This javascript library creates and manages per-zoom-level
|
|
* clusters for large amounts of markers (hundreds or thousands).
|
|
* This library was inspired by the <a href="http://www.maptimize.com">
|
|
* Maptimize</a> hosted clustering solution.
|
|
* <br /><br/>
|
|
* <b>How it works</b>:<br/>
|
|
* The <code>MarkerClusterer</code> will group markers into clusters according to
|
|
* their distance from a cluster's center. When a marker is added,
|
|
* the marker cluster will find a position in all the clusters, and
|
|
* if it fails to find one, it will create a new cluster with the marker.
|
|
* The number of markers in a cluster will be displayed
|
|
* on the cluster marker. When the map viewport changes,
|
|
* <code>MarkerClusterer</code> will destroy the clusters in the viewport
|
|
* and regroup them into new clusters.
|
|
*
|
|
*/
|
|
|
|
/*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
* See the License for the specific language governing permissions and
|
|
* limitations under the License.
|
|
*/
|
|
|
|
|
|
/**
|
|
* @name MarkerClustererOptions
|
|
* @class This class represents optional arguments to the {@link MarkerClusterer}
|
|
* constructor.
|
|
* @property {Number} [maxZoom] The max zoom level monitored by a
|
|
* marker cluster. If not given, the marker cluster assumes the maximum map
|
|
* zoom level. When maxZoom is reached or exceeded all markers will be shown
|
|
* without cluster.
|
|
* @property {Number} [gridSize=60] The grid size of a cluster in pixel. Each
|
|
* cluster will be a square. If you want the algorithm to run faster, you can set
|
|
* this value larger.
|
|
* @property {Array of MarkerStyleOptions} [styles]
|
|
* Custom styles for the cluster markers.
|
|
* The array should be ordered according to increasing cluster size,
|
|
* with the style for the smallest clusters first, and the style for the
|
|
* largest clusters last.
|
|
*/
|
|
|
|
/**
|
|
* @name MarkerStyleOptions
|
|
* @class An array of these is passed into the {@link MarkerClustererOptions}
|
|
* styles option.
|
|
* @property {String} [url] Image url.
|
|
* @property {Number} [height] Image height.
|
|
* @property {Number} [height] Image width.
|
|
* @property {Array of Number} [opt_anchor] Anchor for label text, like [24, 12].
|
|
* If not set, the text will align center and middle.
|
|
* @property {String} [opt_textColor="black"] Text color.
|
|
*/
|
|
|
|
/**
|
|
* Creates a new MarkerClusterer to cluster markers on the map.
|
|
*
|
|
* @constructor
|
|
* @param {GMap2} map The map that the markers should be added to.
|
|
* @param {Array of GMarker} opt_markers Initial set of markers to be clustered.
|
|
* @param {MarkerClustererOptions} opt_opts A container for optional arguments.
|
|
*/
|
|
function MarkerClusterer(map, opt_markers, opt_opts) {
|
|
// private members
|
|
var clusters_ = [];
|
|
var map_ = map;
|
|
var maxZoom_ = null;
|
|
var me_ = this;
|
|
var gridSize_ = 60;
|
|
var sizes = [53, 56, 66, 78, 90];
|
|
var styles_ = [];
|
|
var leftMarkers_ = [];
|
|
var mcfn_ = null;
|
|
|
|
var i = 0;
|
|
for (i = 1; i <= 5; ++i) {
|
|
styles_.push({
|
|
'url': "http://gmaps-utility-library.googlecode.com/svn/trunk/markerclusterer/images/m" + i + ".png",
|
|
'height': sizes[i - 1],
|
|
'width': sizes[i - 1]
|
|
});
|
|
}
|
|
|
|
if (typeof opt_opts === "object" && opt_opts !== null) {
|
|
if (typeof opt_opts.gridSize === "number" && opt_opts.gridSize > 0) {
|
|
gridSize_ = opt_opts.gridSize;
|
|
}
|
|
if (typeof opt_opts.maxZoom === "number") {
|
|
maxZoom_ = opt_opts.maxZoom;
|
|
}
|
|
if (typeof opt_opts.styles === "object" && opt_opts.styles !== null && opt_opts.styles.length !== 0) {
|
|
styles_ = opt_opts.styles;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* When we add a marker, the marker may not in the viewport of map, then we don't deal with it, instead
|
|
* we add the marker into a array called leftMarkers_. When we reset MarkerClusterer we should add the
|
|
* leftMarkers_ into MarkerClusterer.
|
|
*/
|
|
function addLeftMarkers_() {
|
|
if (leftMarkers_.length === 0) {
|
|
return;
|
|
}
|
|
var leftMarkers = [];
|
|
for (i = 0; i < leftMarkers_.length; ++i) {
|
|
me_.addMarker(leftMarkers_[i], true, null, null, true);
|
|
}
|
|
leftMarkers_ = leftMarkers;
|
|
}
|
|
|
|
/**
|
|
* Get cluster marker images of this marker cluster. Mostly used by {@link Cluster}
|
|
* @private
|
|
* @return {Array of String}
|
|
*/
|
|
this.getStyles_ = function () {
|
|
return styles_;
|
|
};
|
|
|
|
/**
|
|
* Remove all markers from MarkerClusterer.
|
|
*/
|
|
this.clearMarkers = function () {
|
|
for (var i = 0; i < clusters_.length; ++i) {
|
|
if (typeof clusters_[i] !== "undefined" && clusters_[i] !== null) {
|
|
clusters_[i].clearMarkers();
|
|
}
|
|
}
|
|
clusters_ = [];
|
|
leftMarkers_ = [];
|
|
GEvent.removeListener(mcfn_);
|
|
};
|
|
|
|
/**
|
|
* Check a marker, whether it is in current map viewport.
|
|
* @private
|
|
* @return {Boolean} if it is in current map viewport
|
|
*/
|
|
function isMarkerInViewport_(marker) {
|
|
return map_.getBounds().containsLatLng(marker.getLatLng());
|
|
}
|
|
|
|
/**
|
|
* When reset MarkerClusterer, there will be some markers get out of its cluster.
|
|
* These markers should be add to new clusters.
|
|
* @param {Array of GMarker} markers Markers to add.
|
|
*/
|
|
function reAddMarkers_(markers) {
|
|
var len = markers.length;
|
|
var clusters = [];
|
|
for (var i = len - 1; i >= 0; --i) {
|
|
me_.addMarker(markers[i].marker, true, markers[i].isAdded, clusters, true);
|
|
}
|
|
addLeftMarkers_();
|
|
}
|
|
|
|
/**
|
|
* Add a marker.
|
|
* @private
|
|
* @param {GMarker} marker Marker you want to add
|
|
* @param {Boolean} opt_isNodraw Whether redraw the cluster contained the marker
|
|
* @param {Boolean} opt_isAdded Whether the marker is added to map. Never use it.
|
|
* @param {Array of Cluster} opt_clusters Provide a list of clusters, the marker
|
|
* cluster will only check these cluster where the marker should join.
|
|
*/
|
|
this.addMarker = function (marker, opt_isNodraw, opt_isAdded, opt_clusters, opt_isNoCheck) {
|
|
if (opt_isNoCheck !== true) {
|
|
if (!isMarkerInViewport_(marker)) {
|
|
leftMarkers_.push(marker);
|
|
return;
|
|
}
|
|
}
|
|
|
|
var isAdded = opt_isAdded;
|
|
var clusters = opt_clusters;
|
|
var pos = map_.fromLatLngToDivPixel(marker.getLatLng());
|
|
|
|
if (typeof isAdded !== "boolean") {
|
|
isAdded = false;
|
|
}
|
|
if (typeof clusters !== "object" || clusters === null) {
|
|
clusters = clusters_;
|
|
}
|
|
|
|
var length = clusters.length;
|
|
var cluster = null;
|
|
for (var i = length - 1; i >= 0; i--) {
|
|
cluster = clusters[i];
|
|
var center = cluster.getCenter();
|
|
if (center === null) {
|
|
continue;
|
|
}
|
|
center = map_.fromLatLngToDivPixel(center);
|
|
|
|
// Found a cluster which contains the marker.
|
|
if (pos.x >= center.x - gridSize_ && pos.x <= center.x + gridSize_ &&
|
|
pos.y >= center.y - gridSize_ && pos.y <= center.y + gridSize_) {
|
|
cluster.addMarker({
|
|
'isAdded': isAdded,
|
|
'marker': marker
|
|
});
|
|
if (!opt_isNodraw) {
|
|
cluster.redraw_();
|
|
}
|
|
return;
|
|
}
|
|
}
|
|
|
|
// No cluster contain the marker, create a new cluster.
|
|
cluster = new Cluster(this, map);
|
|
cluster.addMarker({
|
|
'isAdded': isAdded,
|
|
'marker': marker
|
|
});
|
|
if (!opt_isNodraw) {
|
|
cluster.redraw_();
|
|
}
|
|
|
|
// Add this cluster both in clusters provided and clusters_
|
|
clusters.push(cluster);
|
|
if (clusters !== clusters_) {
|
|
clusters_.push(cluster);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Remove a marker.
|
|
*
|
|
* @param {GMarker} marker The marker you want to remove.
|
|
*/
|
|
|
|
this.removeMarker = function (marker) {
|
|
for (var i = 0; i < clusters_.length; ++i) {
|
|
if (clusters_[i].remove(marker)) {
|
|
clusters_[i].redraw_();
|
|
return;
|
|
}
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Redraw all clusters in viewport.
|
|
*/
|
|
this.redraw_ = function () {
|
|
var clusters = this.getClustersInViewport_();
|
|
for (var i = 0; i < clusters.length; ++i) {
|
|
clusters[i].redraw_(true);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Get all clusters in viewport.
|
|
* @return {Array of Cluster}
|
|
*/
|
|
this.getClustersInViewport_ = function () {
|
|
var clusters = [];
|
|
var curBounds = map_.getBounds();
|
|
for (var i = 0; i < clusters_.length; i ++) {
|
|
if (clusters_[i].isInBounds(curBounds)) {
|
|
clusters.push(clusters_[i]);
|
|
}
|
|
}
|
|
return clusters;
|
|
};
|
|
|
|
/**
|
|
* Get max zoom level.
|
|
* @private
|
|
* @return {Number}
|
|
*/
|
|
this.getMaxZoom_ = function () {
|
|
return maxZoom_;
|
|
};
|
|
|
|
/**
|
|
* Get map object.
|
|
* @private
|
|
* @return {GMap2}
|
|
*/
|
|
this.getMap_ = function () {
|
|
return map_;
|
|
};
|
|
|
|
/**
|
|
* Get grid size
|
|
* @private
|
|
* @return {Number}
|
|
*/
|
|
this.getGridSize_ = function () {
|
|
return gridSize_;
|
|
};
|
|
|
|
/**
|
|
* Get total number of markers.
|
|
* @return {Number}
|
|
*/
|
|
this.getTotalMarkers = function () {
|
|
var result = 0;
|
|
for (var i = 0; i < clusters_.length; ++i) {
|
|
result += clusters_[i].getTotalMarkers();
|
|
}
|
|
return result;
|
|
};
|
|
|
|
/**
|
|
* Get total number of clusters.
|
|
* @return {int}
|
|
*/
|
|
this.getTotalClusters = function () {
|
|
return clusters_.length;
|
|
};
|
|
|
|
/**
|
|
* Collect all markers of clusters in viewport and regroup them.
|
|
*/
|
|
this.resetViewport = function () {
|
|
var clusters = this.getClustersInViewport_();
|
|
var tmpMarkers = [];
|
|
var removed = 0;
|
|
|
|
for (var i = 0; i < clusters.length; ++i) {
|
|
var cluster = clusters[i];
|
|
var oldZoom = cluster.getCurrentZoom();
|
|
if (oldZoom === null) {
|
|
continue;
|
|
}
|
|
var curZoom = map_.getZoom();
|
|
if (curZoom !== oldZoom) {
|
|
|
|
// If the cluster zoom level changed then destroy the cluster
|
|
// and collect its markers.
|
|
var mks = cluster.getMarkers();
|
|
for (var j = 0; j < mks.length; ++j) {
|
|
var newMarker = {
|
|
'isAdded': false,
|
|
'marker': mks[j].marker
|
|
};
|
|
tmpMarkers.push(newMarker);
|
|
}
|
|
cluster.clearMarkers();
|
|
removed++;
|
|
for (j = 0; j < clusters_.length; ++j) {
|
|
if (cluster === clusters_[j]) {
|
|
clusters_.splice(j, 1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Add the markers collected into marker cluster to reset
|
|
reAddMarkers_(tmpMarkers);
|
|
this.redraw_();
|
|
};
|
|
|
|
|
|
/**
|
|
* Add a set of markers.
|
|
*
|
|
* @param {Array of GMarker} markers The markers you want to add.
|
|
*/
|
|
this.addMarkers = function (markers) {
|
|
for (var i = 0; i < markers.length; ++i) {
|
|
this.addMarker(markers[i], true);
|
|
}
|
|
this.redraw_();
|
|
};
|
|
|
|
// initialize
|
|
if (typeof opt_markers === "object" && opt_markers !== null) {
|
|
this.addMarkers(opt_markers);
|
|
}
|
|
|
|
// when map move end, regroup.
|
|
mcfn_ = GEvent.addListener(map_, "moveend", function () {
|
|
me_.resetViewport();
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Create a cluster to collect markers.
|
|
* A cluster includes some markers which are in a block of area.
|
|
* If there are more than one markers in cluster, the cluster
|
|
* will create a {@link ClusterMarker_} and show the total number
|
|
* of markers in cluster.
|
|
*
|
|
* @constructor
|
|
* @private
|
|
* @param {MarkerClusterer} markerClusterer The marker cluster object
|
|
*/
|
|
function Cluster(markerClusterer) {
|
|
var center_ = null;
|
|
var markers_ = [];
|
|
var markerClusterer_ = markerClusterer;
|
|
var map_ = markerClusterer.getMap_();
|
|
var clusterMarker_ = null;
|
|
var zoom_ = map_.getZoom();
|
|
|
|
/**
|
|
* Get markers of this cluster.
|
|
*
|
|
* @return {Array of GMarker}
|
|
*/
|
|
this.getMarkers = function () {
|
|
return markers_;
|
|
};
|
|
|
|
/**
|
|
* If this cluster intersects certain bounds.
|
|
*
|
|
* @param {GLatLngBounds} bounds A bounds to test
|
|
* @return {Boolean} Is this cluster intersects the bounds
|
|
*/
|
|
this.isInBounds = function (bounds) {
|
|
if (center_ === null) {
|
|
return false;
|
|
}
|
|
|
|
if (!bounds) {
|
|
bounds = map_.getBounds();
|
|
}
|
|
var sw = map_.fromLatLngToDivPixel(bounds.getSouthWest());
|
|
var ne = map_.fromLatLngToDivPixel(bounds.getNorthEast());
|
|
|
|
var centerxy = map_.fromLatLngToDivPixel(center_);
|
|
var inViewport = true;
|
|
var gridSize = markerClusterer.getGridSize_();
|
|
if (zoom_ !== map_.getZoom()) {
|
|
var dl = map_.getZoom() - zoom_;
|
|
gridSize = Math.pow(2, dl) * gridSize;
|
|
}
|
|
if (ne.x !== sw.x && (centerxy.x + gridSize < sw.x || centerxy.x - gridSize > ne.x)) {
|
|
inViewport = false;
|
|
}
|
|
if (inViewport && (centerxy.y + gridSize < ne.y || centerxy.y - gridSize > sw.y)) {
|
|
inViewport = false;
|
|
}
|
|
return inViewport;
|
|
};
|
|
|
|
/**
|
|
* Get cluster center.
|
|
*
|
|
* @return {GLatLng}
|
|
*/
|
|
this.getCenter = function () {
|
|
return center_;
|
|
};
|
|
|
|
/**
|
|
* Add a marker.
|
|
*
|
|
* @param {Object} marker An object of marker you want to add:
|
|
* {Boolean} isAdded If the marker is added on map.
|
|
* {GMarker} marker The marker you want to add.
|
|
*/
|
|
this.addMarker = function (marker) {
|
|
if (center_ === null) {
|
|
/*var pos = marker['marker'].getLatLng();
|
|
pos = map.fromLatLngToContainerPixel(pos);
|
|
pos.x = parseInt(pos.x - pos.x % (GRIDWIDTH * 2) + GRIDWIDTH);
|
|
pos.y = parseInt(pos.y - pos.y % (GRIDWIDTH * 2) + GRIDWIDTH);
|
|
center = map.fromContainerPixelToLatLng(pos);*/
|
|
center_ = marker.marker.getLatLng();
|
|
}
|
|
markers_.push(marker);
|
|
};
|
|
|
|
/**
|
|
* Remove a marker from cluster.
|
|
*
|
|
* @param {GMarker} marker The marker you want to remove.
|
|
* @return {Boolean} Whether find the marker to be removed.
|
|
*/
|
|
this.removeMarker = function (marker) {
|
|
for (var i = 0; i < markers_.length; ++i) {
|
|
if (marker === markers_[i].marker) {
|
|
if (markers_[i].isAdded) {
|
|
map_.removeOverlay(markers_[i].marker);
|
|
}
|
|
markers_.splice(i, 1);
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
};
|
|
|
|
/**
|
|
* Get current zoom level of this cluster.
|
|
* Note: the cluster zoom level and map zoom level not always the same.
|
|
*
|
|
* @return {Number}
|
|
*/
|
|
this.getCurrentZoom = function () {
|
|
return zoom_;
|
|
};
|
|
|
|
/**
|
|
* Redraw a cluster.
|
|
* @private
|
|
* @param {Boolean} isForce If redraw by force, no matter if the cluster is
|
|
* in viewport.
|
|
*/
|
|
this.redraw_ = function (isForce) {
|
|
if (!isForce && !this.isInBounds()) {
|
|
return;
|
|
}
|
|
|
|
// Set cluster zoom level.
|
|
zoom_ = map_.getZoom();
|
|
var i = 0;
|
|
var mz = markerClusterer.getMaxZoom_();
|
|
if (mz === null) {
|
|
mz = map_.getCurrentMapType().getMaximumResolution();
|
|
}
|
|
if (zoom_ >= mz || this.getTotalMarkers() === 1) {
|
|
|
|
// If current zoom level is beyond the max zoom level or the cluster
|
|
// have only one marker, the marker(s) in cluster will be showed on map.
|
|
for (i = 0; i < markers_.length; ++i) {
|
|
if (markers_[i].isAdded) {
|
|
if (markers_[i].marker.isHidden()) {
|
|
markers_[i].marker.show();
|
|
}
|
|
} else {
|
|
map_.addOverlay(markers_[i].marker);
|
|
markers_[i].isAdded = true;
|
|
}
|
|
}
|
|
if (clusterMarker_ !== null) {
|
|
clusterMarker_.hide();
|
|
}
|
|
} else {
|
|
// Else add a cluster marker on map to show the number of markers in
|
|
// this cluster.
|
|
for (i = 0; i < markers_.length; ++i) {
|
|
if (markers_[i].isAdded && (!markers_[i].marker.isHidden())) {
|
|
markers_[i].marker.hide();
|
|
}
|
|
}
|
|
if (clusterMarker_ === null) {
|
|
clusterMarker_ = new ClusterMarker_(center_, this.getTotalMarkers(), markerClusterer_.getStyles_(), markerClusterer_.getGridSize_());
|
|
map_.addOverlay(clusterMarker_);
|
|
} else {
|
|
if (clusterMarker_.isHidden()) {
|
|
clusterMarker_.show();
|
|
}
|
|
clusterMarker_.redraw(true);
|
|
}
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Remove all the markers from this cluster.
|
|
*/
|
|
this.clearMarkers = function () {
|
|
if (clusterMarker_ !== null) {
|
|
map_.removeOverlay(clusterMarker_);
|
|
}
|
|
for (var i = 0; i < markers_.length; ++i) {
|
|
if (markers_[i].isAdded) {
|
|
map_.removeOverlay(markers_[i].marker);
|
|
}
|
|
}
|
|
markers_ = [];
|
|
};
|
|
|
|
/**
|
|
* Get number of markers.
|
|
* @return {Number}
|
|
*/
|
|
this.getTotalMarkers = function () {
|
|
return markers_.length;
|
|
};
|
|
}
|
|
|
|
/**
|
|
* ClusterMarker_ creates a marker that shows the number of markers that
|
|
* a cluster contains.
|
|
*
|
|
* @constructor
|
|
* @private
|
|
* @param {GLatLng} latlng Marker's lat and lng.
|
|
* @param {Number} count Number to show.
|
|
* @param {Array of Object} styles The image list to be showed:
|
|
* {String} url Image url.
|
|
* {Number} height Image height.
|
|
* {Number} width Image width.
|
|
* {Array of Number} anchor Text anchor of image left and top.
|
|
* {String} textColor text color.
|
|
* @param {Number} padding Padding of marker center.
|
|
*/
|
|
function ClusterMarker_(latlng, count, styles, padding) {
|
|
var index = 0;
|
|
var dv = count;
|
|
while (dv !== 0) {
|
|
dv = parseInt(dv / 10, 10);
|
|
index ++;
|
|
}
|
|
|
|
if (styles.length < index) {
|
|
index = styles.length;
|
|
}
|
|
this.url_ = styles[index - 1].url;
|
|
this.height_ = styles[index - 1].height;
|
|
this.width_ = styles[index - 1].width;
|
|
this.textColor_ = styles[index - 1].opt_textColor;
|
|
this.anchor_ = styles[index - 1].opt_anchor;
|
|
this.latlng_ = latlng;
|
|
this.index_ = index;
|
|
this.styles_ = styles;
|
|
this.text_ = count;
|
|
this.padding_ = padding;
|
|
}
|
|
|
|
ClusterMarker_.prototype = new GOverlay();
|
|
|
|
/**
|
|
* Initialize cluster marker.
|
|
* @private
|
|
*/
|
|
ClusterMarker_.prototype.initialize = function (map) {
|
|
this.map_ = map;
|
|
var div = document.createElement("div");
|
|
var latlng = this.latlng_;
|
|
var pos = map.fromLatLngToDivPixel(latlng);
|
|
pos.x -= parseInt(this.width_ / 2, 10);
|
|
pos.y -= parseInt(this.height_ / 2, 10);
|
|
var mstyle = "";
|
|
if (document.all) {
|
|
mstyle = 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="' + this.url_ + '");';
|
|
} else {
|
|
mstyle = "background:url(" + this.url_ + ");";
|
|
}
|
|
if (typeof this.anchor_ === "object") {
|
|
if (typeof this.anchor_[0] === "number" && this.anchor_[0] > 0 && this.anchor_[0] < this.height_) {
|
|
mstyle += 'height:' + (this.height_ - this.anchor_[0]) + 'px;padding-top:' + this.anchor_[0] + 'px;';
|
|
} else {
|
|
mstyle += 'height:' + this.height_ + 'px;line-height:' + this.height_ + 'px;';
|
|
}
|
|
if (typeof this.anchor_[1] === "number" && this.anchor_[1] > 0 && this.anchor_[1] < this.width_) {
|
|
mstyle += 'width:' + (this.width_ - this.anchor_[1]) + 'px;padding-left:' + this.anchor_[1] + 'px;';
|
|
} else {
|
|
mstyle += 'width:' + this.width_ + 'px;text-align:center;';
|
|
}
|
|
} else {
|
|
mstyle += 'height:' + this.height_ + 'px;line-height:' + this.height_ + 'px;';
|
|
mstyle += 'width:' + this.width_ + 'px;text-align:center;';
|
|
}
|
|
var txtColor = this.textColor_ ? this.textColor_ : 'black';
|
|
|
|
div.style.cssText = mstyle + 'cursor:pointer;top:' + pos.y + "px;left:" +
|
|
pos.x + "px;color:" + txtColor + ";position:absolute;font-size:11px;" +
|
|
'font-family:Arial,sans-serif;font-weight:bold';
|
|
div.innerHTML = this.text_;
|
|
map.getPane(G_MAP_MAP_PANE).appendChild(div);
|
|
var padding = this.padding_;
|
|
GEvent.addDomListener(div, "click", function () {
|
|
var pos = map.fromLatLngToDivPixel(latlng);
|
|
var sw = new GPoint(pos.x - padding, pos.y + padding);
|
|
sw = map.fromDivPixelToLatLng(sw);
|
|
var ne = new GPoint(pos.x + padding, pos.y - padding);
|
|
ne = map.fromDivPixelToLatLng(ne);
|
|
var zoom = map.getBoundsZoomLevel(new GLatLngBounds(sw, ne), map.getSize());
|
|
map.setCenter(latlng, zoom);
|
|
});
|
|
this.div_ = div;
|
|
};
|
|
|
|
/**
|
|
* Remove this overlay.
|
|
* @private
|
|
*/
|
|
ClusterMarker_.prototype.remove = function () {
|
|
this.div_.parentNode.removeChild(this.div_);
|
|
};
|
|
|
|
/**
|
|
* Copy this overlay.
|
|
* @private
|
|
*/
|
|
ClusterMarker_.prototype.copy = function () {
|
|
return new ClusterMarker_(this.latlng_, this.index_, this.text_, this.styles_, this.padding_);
|
|
};
|
|
|
|
/**
|
|
* Redraw this overlay.
|
|
* @private
|
|
*/
|
|
ClusterMarker_.prototype.redraw = function (force) {
|
|
if (!force) {
|
|
return;
|
|
}
|
|
var pos = this.map_.fromLatLngToDivPixel(this.latlng_);
|
|
pos.x -= parseInt(this.width_ / 2, 10);
|
|
pos.y -= parseInt(this.height_ / 2, 10);
|
|
this.div_.style.top = pos.y + "px";
|
|
this.div_.style.left = pos.x + "px";
|
|
};
|
|
|
|
/**
|
|
* Hide this cluster marker.
|
|
*/
|
|
ClusterMarker_.prototype.hide = function () {
|
|
this.div_.style.display = "none";
|
|
};
|
|
|
|
/**
|
|
* Show this cluster marker.
|
|
*/
|
|
ClusterMarker_.prototype.show = function () {
|
|
this.div_.style.display = "";
|
|
};
|
|
|
|
/**
|
|
* Get whether the cluster marker is hidden.
|
|
* @return {Boolean}
|
|
*/
|
|
ClusterMarker_.prototype.isHidden = function () {
|
|
return this.div_.style.display === "none";
|
|
};
|