markerCluster 一组的一个标记
markerCluster one marker for a group
我正在使用 markerCluster,效果很好。
这是代码如何使用 2 个标记:
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});
}
以及不同缩放级别的结果:
如果我缩小,markerCluster 会计算一个区域中的标记数。我想改变它,让一些标记代表多个人。因此,如果我有一个代表 21 人的大标记和代表 1 人的第二个标记,那么如果我缩小,我希望看到蓝色标记上的数字 22,而大标记上应该有 21。这样的事情可能吗?
例如,我想得到以下结果,即使我只使用两个标记:
创建一个 "calculator" 函数来执行您想要的操作(对指示 "number of people".
的标记的 属性 求和
"calculator" 函数的文档。 Returns 具有以下属性的对象:
text
(要出现在群集上的文本)
index
(样式数组的索引以访问该群集的样式。
/**
* 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
};
};
如果您将 属性 添加到您的数据 "number",您可以这样做:
代码片段:
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,效果很好。
这是代码如何使用 2 个标记:
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});
}
以及不同缩放级别的结果:
如果我缩小,markerCluster 会计算一个区域中的标记数。我想改变它,让一些标记代表多个人。因此,如果我有一个代表 21 人的大标记和代表 1 人的第二个标记,那么如果我缩小,我希望看到蓝色标记上的数字 22,而大标记上应该有 21。这样的事情可能吗?
例如,我想得到以下结果,即使我只使用两个标记:
创建一个 "calculator" 函数来执行您想要的操作(对指示 "number of people".
的标记的 属性 求和"calculator" 函数的文档。 Returns 具有以下属性的对象:
text
(要出现在群集上的文本)index
(样式数组的索引以访问该群集的样式。
/**
* 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
};
};
如果您将 属性 添加到您的数据 "number",您可以这样做:
代码片段:
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>