markerCluster为一个组标记一个标记 [英] markerCluster one marker for a group
问题描述
我使用
如果我缩小，markerCluster计算一个区域中标记的数量。我想改变它，使一些标记代表多个人。所以如果我有一个代表21个人的大标记，代表1个人的第二个标记，那么如果我缩小，我想看到蓝色标记上的数字22，而大标记应该有21个。是这样的可能吗？
例如，我想得到以下结果，即使我只使用两个标记：
创建一个计算器函数做你想做的事情（汇总表示人数的标记的属性。）
calculator函数的文档。返回一个带有属性的对象：
-
文本（要显示在群集中的文本） -
index（样式数组中的索引，用于访问该群集的样式。
/ **
* fu用于计算集群图标图像。
*
* @param {Array。< google.maps.Marker>}标记clusterer中的标记。
* @param {number} numStyles可用样式的数量。
* @return {Object}一个对象属性：'text'（字符串）和'index'（数字）。
* @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
};
};
如果你为数据添加一个属性number，你可以这样做： / p>
代码段：
$ b
window.onload = function（）{//集群标记var clusterMarker = []; var map = new google.maps.Map（document.getElementById（'map'），{center：new google.maps.LatLng（50，3），zoom：6，mapTypeId：'terrain'}）; //一些样本数据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）; //在位置创建标记var marker = new google.maps.Marker（{position：location，map：map，number：sampleData [i] .number，title：+ sampleData [i] .number}）; //需要聚簇标记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
html，body，＃map {height：100％;宽度：100％; margin：0px; < script src =https：//
/ 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:
text(the text to appear on the cluster)index(the index into the styles array to access the style for that cluster.
/**
* 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为一个组标记一个标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
