我使用
如果我缩小，markerCluster计算一个区域中标记的数量。我想改变它，使一些标记代表多个人。所以如果我有一个代表21个人的大标记，代表1个人的第二个标记，那么如果我缩小，我想看到蓝色标记上的数字22，而大标记应该有21个。是这样的可能吗？
例如，我想得到以下结果，即使我只使用两个标记：
创建一个计算器函数做你想做的事情（汇总表示人数的标记的属性。）
calculator函数的文档。返回一个带有属性的对象：
/ p>
I am using markerCluster and it works great.
Here is the code how it works with 2 markers:
window.onload = function() {
// cluster marker
var clusterMarker = [];
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng( 50, 3),
zoom: 6,
mapTypeId: 'terrain'
});
// Some sample data
var sampleData = [{lat:50, lng:3}, {lat:50, lng:3.02}];
for (var i = 0; i < sampleData.length; i ++) {
var point = sampleData[i];
var location = new google.maps.LatLng(point.lat, point.lng);
// create marker at location
var marker = new google.maps.Marker({
position: location,
map: map
});
// needed to cluster marker
clusterMarker.push(marker);
}
new MarkerClusterer(map, clusterMarker, {imagePath: 'images/m', maxZoom: 15});
}
and the result on different zoom levels:
If I zoom out, markerCluster counts the number of markers in one area. I would like to change it such that some marker represents multiple persons. So if I have one big marker that represents 21 persons, and a second marker that represents 1 person, then if I zoom out I would like to see the number 22 on the blue marker, and the big marker should have 21 on it. Is something like that possible?
So for example, I would like to get the following result, even if I just use two markers:
Create a "calculator" function that does what you want (sums the property of the marker that indicates the "number of people".
Documentation for "calculator" function. Returns an Object with the properties:
/**
* 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
};
};
If you add a property to your data, "number", you could do something like this:
code snippet:
window.onload = function() {
// cluster marker
var clusterMarker = [];
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(50, 3),
zoom: 6,
mapTypeId: 'terrain'
});
// Some sample data
var sampleData = [{
lat: 50,
lng: 3,
number: 20
}, {
lat: 50,
lng: 3.02,
number: 1
}];
for (var i = 0; i < sampleData.length; i++) {
var point = sampleData[i];
var location = new google.maps.LatLng(point.lat, point.lng);
// create marker at location
var marker = new google.maps.Marker({
position: location,
map: map,
number: sampleData[i].number,
title: "" + sampleData[i].number
});
// needed to cluster marker
clusterMarker.push(marker);
}
var clusterer = new MarkerClusterer(map, clusterMarker, {
imagePath: 'https://raw.githubusercontent.com/googlemaps/js-marker-clusterer/gh-pages/images/m',
maxZoom: 15
});
clusterer.setCalculator(function(markers, numStyles) {
var index = 0;
var count = 0;
for (var i = 0; i < markers.length; i++) {
if (markers[i].number) {
count += markers[i].number;
} else {
count++;
}
}
var dv = markers.length;
while (dv !== 0) {
dv = parseInt(dv / 10, 10);
index++;
}
index = Math.min(index, numStyles);
return {
text: count,
index: index
};
});
}html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}<script src="https://maps.googleapis.com/maps/api/js"></script> <script src="https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/src/markerclusterer.js"></script> <div id="map"></div>
这篇关于markerCluster为一个组标记一个标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！