我正在使用 Google MarkerClusterer。每当地图缩放级别高于 15 时，我想对所有标记进行分簇。
配置选项中有一个
maxZoom我已尝试将其设置如下，但无论我将地图设置为何种缩放级别，地图仍保持聚集状态：
new_mc = new MarkerClusterer(map, newco_markers, {
maxZoom: 9
});
我做错了什么吗？我是否误解了该选项的用途，或者有其他方法可以解决这个问题吗？
在此示例上设置 maxZoom 级别，会对缩放级别 8 及以上的所有标记进行分簇。
（具有有效密钥的示例的工作版本，github中的原始示例来自需要密钥之前）
重现：
MarkerClustererPlus的文档更清晰一点：
最大缩放 |数量 |启用聚类的最大缩放级别；如果要在所有缩放级别启用聚类，则为空。默认值为空。
代码片段：
var styles = [
[{
url: 'https://cdn.jsdelivr.net/npm/[email protected]/images/people35.png',
height: 35,
width: 35,
anchor: [16, 0],
textColor: '#ff00ff',
textSize: 10
}, {
url: 'https://cdn.jsdelivr.net/npm/[email protected]/images/people45.png',
height: 45,
width: 45,
anchor: [24, 0],
textColor: '#ff0000',
textSize: 11
}, {
url: 'https://cdn.jsdelivr.net/npm/[email protected]/images/people55.png',
height: 55,
width: 55,
anchor: [32, 0],
textColor: '#ffffff',
textSize: 12
}],
[{
url: 'https://cdn.jsdelivr.net/npm/[email protected]/images/conv30.png',
height: 27,
width: 30,
anchor: [3, 0],
textColor: '#ff00ff',
textSize: 10
}, {
url: 'https://cdn.jsdelivr.net/npm/[email protected]/images/conv40.png',
height: 36,
width: 40,
anchor: [6, 0],
textColor: '#ff0000',
textSize: 11
}, {
url: 'https://cdn.jsdelivr.net/npm/[email protected]/images/conv50.png',
width: 50,
height: 45,
anchor: [8, 0],
textSize: 12
}],
[{
url: 'https://cdn.jsdelivr.net/npm/[email protected]/images/heart30.png',
height: 26,
width: 30,
anchor: [4, 0],
textColor: '#ff00ff',
textSize: 10
}, {
url: 'https://cdn.jsdelivr.net/npm/[email protected]/images/heart40.png',
height: 35,
width: 40,
anchor: [8, 0],
textColor: '#ff0000',
textSize: 11
}, {
url: 'https://cdn.jsdelivr.net/npm/[email protected]/images/heart50.png',
width: 50,
height: 44,
anchor: [12, 0],
textSize: 12
}],
[{
url: 'https://cdn.jsdelivr.net/npm/[email protected]/images/pin.png',
height: 48,
width: 30,
anchor: [-18, 0],
textColor: '#ffffff',
textSize: 10,
iconAnchor: [15, 48]
}]
];
var markerClusterer = null;
var map = null;
var imageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&' +
'chco=FFFFFF,008CFF,000000&ext=.png';
function refreshMap(data) {
if (markerClusterer) {
markerClusterer.clearMarkers();
}
var markers = [];
var markerImage = new google.maps.MarkerImage(imageUrl,
new google.maps.Size(24, 32));
for (var i = 0; i < data.photos.length; ++i) {
var latLng = new google.maps.LatLng(data.photos[i].latitude,
data.photos[i].longitude)
var marker = new google.maps.Marker({
position: latLng,
draggable: true,
icon: markerImage
});
markers.push(marker);
}
var zoom = parseInt(document.getElementById('zoom').value, 10);
var size = parseInt(document.getElementById('size').value, 10);
var style = parseInt(document.getElementById('style').value, 10);
zoom = zoom === -1 ? null : zoom;
size = size === -1 ? null : size;
style = style === -1 ? null : style;
markerClusterer = new MarkerClusterer(map, markers, {
maxZoom: zoom,
gridSize: size,
styles: styles[style],
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});
}
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: new google.maps.LatLng(39.91, 116.38),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var refresh = document.getElementById('refresh');
google.maps.event.addDomListener(refresh, 'click', refreshMap);
var clear = document.getElementById('clear');
google.maps.event.addDomListener(clear, 'click', clearClusters);
// $.getJSON("https://api.myjson.com/bins/6ad78", function(data, textStatus, jqXHR) {
// console.log(textStatus);
refreshMap(data);
// });
}
function clearClusters(e) {
e.preventDefault();
e.stopPropagation();
markerClusterer.clearMarkers();
}
google.maps.event.addDomListener(window, 'load', initialize);
var data = { "count": 10785236,
"photos": [{"photo_id": 27932, "photo_title": "Atardecer en Embalse", "photo_url": "http://www.panoramio.com/photo/27932", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/27932.jpg", "longitude": -64.404945, "latitude": -32.202924, "width": 500, "height": 375, "upload_date": "25 June 2006", "owner_id": 4483, "owner_name": "Miguel Coranti", "owner_url": "http://www.panoramio.com/user/4483"}
,
{"photo_id": 522084, "photo_title": "In Memoriam Antoine de Saint Exupéry", "photo_url": "http://www.panoramio.com/photo/522084", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/522084.jpg", "longitude": 17.470493, "latitude": 47.867077, "width": 500, "height": 350, "upload_date": "21 January 2007", "owner_id": 109117, "owner_name": "Busa Péter", "owner_url": "http://www.panoramio.com/user/109117"}
,
{"photo_id": 1578881, "photo_title": "Rosina Lamberti,Sunset,Templestowe , Victoria, Australia", "photo_url": "http://www.panoramio.com/photo/1578881", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/1578881.jpg", "longitude": 145.141754, "latitude": -37.766372, "width": 500, "height": 474, "upload_date": "01 April 2007", "owner_id": 140796, "owner_name": "rosina lamberti", "owner_url": "http://www.panoramio.com/user/140796"}
,
{"photo_id": 97671, "photo_title": "kin-dza-dza", "photo_url": "http://www.panoramio.com/photo/97671", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/97671.jpg", "longitude": 30.785408, "latitude": 46.639301, "width": 500, "height": 375, "upload_date": "09 December 2006", "owner_id": 13058, "owner_name": "Kyryl", "owner_url": "http://www.panoramio.com/user/13058"}
,
{"photo_id": 25514, "photo_title": "Arenal", "photo_url": "http://www.panoramio.com/photo/25514", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/25514.jpg", "longitude": -84.693432, "latitude": 10.479372, "width": 500, "height": 375, "upload_date": "17 June 2006", "owner_id": 4112, "owner_name": "Roberto Garcia", "owner_url": "http://www.panoramio.com/user/4112"}
,
{"photo_id": 57823, "photo_title": "Maria Alm", "photo_url": "http://www.panoramio.com/photo/57823", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/57823.jpg", "longitude": 12.900009, "latitude": 47.409968, "width": 500, "height": 333, "upload_date": "05 October 2006", "owner_id": 8060, "owner_name": "Norbert MAIER", "owner_url": "http://www.panoramio.com/user/8060"}
,
{"photo_id": 532693, "photo_title": "Wheatfield in afternoon light", "photo_url": "http://www.panoramio.com/photo/532693", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/532693.jpg", "longitude": 11.272659, "latitude": 59.637472, "width": 500, "height": 333, "upload_date": "22 January 2007", "owner_id": 39160, "owner_name": "Snemann", "owner_url": "http://www.panoramio.com/user/39160"}
,
{"photo_id": 57819, "photo_title": "Burg Hohenwerfen", "photo_url": "http://www.panoramio.com/photo/57819", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/57819.jpg", "longitude": 13.189259, "latitude": 47.483221, "width": 500, "height": 333, "upload_date": "05 October 2006", "owner_id": 8060, "owner_name": "Norbert MAIER", "owner_url": "http://www.panoramio.com/user/8060"}
,
{"photo_id": 1282387, "photo_title": "Thunderstorm in Martinique", "photo_url": "http://www.panoramio.com/photo/1282387", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/1282387.jpg", "longitude": -61.013432, "latitude": 14.493688, "width": 500, "height": 400, "upload_date": "12 March 2007", "owner_id": 49870, "owner_name": "Jean-Michel Raggioli", "owner_url": "http://www.panoramio.com/user/49870"}
,
{"photo_id": 945976, "photo_title": "Al tard", "photo_url": "http://www.panoramio.com/photo/945976", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/945976.jpg", "longitude": 0.490866, "latitude": 40.903783, "width": 335, "height": 500, "upload_date": "21 February 2007", "owner_id": 3022, "owner_name": "Arcadi", "owner_url": "http://www.panoramio.com/user/3022"}
,
{"photo_id": 73514, "photo_title": "Hintersee bei Ramsau", "photo_url": "http://www.panoramio.com/photo/73514", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/73514.jpg", "longitude": 12.852459, "latitude": 47.609519, "width": 500, "height": 333, "upload_date": "30 October 2006", "owner_id": 8060, "owner_name": "Norbert MAIER", "owner_url": "http://www.panoramio.com/user/8060"}
,
{"photo_id": 298967, "photo_title": "Antelope Canyon, Ray of Light", "photo_url": "http://www.panoramio.com/photo/298967", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/298967.jpg", "longitude": -111.407890, "latitude": 36.894037, "width": 500, "height": 375, "upload_date": "04 January 2007", "owner_id": 64388, "owner_name": "Artusi", "owner_url": "http://www.panoramio.com/user/64388"}
,
{"photo_id": 88151, "photo_title": "Val Verzasca - Switzerland", "photo_url": "http://www.panoramio.com/photo/88151", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/88151.jpg", "longitude": 8.838158, "latitude": 46.257746, "width": 500, "height": 375, "upload_date": "28 November 2006", "owner_id": 11098, "owner_name": "Michele Masnata", "owner_url": "http://www.panoramio.com/user/11098"}
,
{"photo_id": 6463, "photo_title": "Guggenheim and spider", "photo_url": "http://www.panoramio.com/photo/6463", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/6463.jpg", "longitude": -2.933736, "latitude": 43.269159, "width": 500, "height": 375, "upload_date": "09 January 2006", "owner_id": 414, "owner_name": "Sonia Villegas", "owner_url": "http://www.panoramio.com/user/414"}
,
{"photo_id": 107980, "photo_title": "Mostar", "photo_url": "http://www.panoramio.com/photo/107980", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/107980.jpg", "longitude": 17.815200, "latitude": 43.337255, "width": 369, "height": 500, "upload_date": "10 December 2006", "owner_id": 12954, "owner_name": "Ziębol", "owner_url": "http://www.panoramio.com/user/12954"}
,
{"photo_id": 7593894, "photo_title": "桂林名胜百景——遇龙河", "photo_url": "http://www.panoramio.com/photo/7593894", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/7593894.jpg", "longitude": 110.424957, "latitude": 24.781747, "width": 500, "height": 375, "upload_date": "04 February 2008", "owner_id": 161470, "owner_name": "John Su", "owner_url": "http://www.panoramio.com/user/161470"}
]}body {
margin: 0;
padding: 10px 20px 20px;
font-family: Arial;
font-size: 16px;
}
#map-container {
padding: 6px;
border-width: 1px;
border-style: solid;
border-color: #ccc #ccc #999 #ccc;
-webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
-moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
width: 800px;
}
#map {
width: 800px;
height: 400px;
}
#actions {
list-style: none;
padding: 0;
}
#inline-actions {
padding-top: 10px;
}
.item {
margin-left: 20px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<!-- scr -- ipt src="https://googlemaps.github.io/js-marker-clusterer/examples/data.json"></scr -- ipt -->
<script src="https://unpkg.com/@google/[email protected]/dist/markerclustererplus.min.js"></script>
<h3>An example of MarkerClusterer v3</h3>
<div id="map-container">
<div id="map"></div>
</div>
<div id="inline-actions">
<span>Max zoom level:
<select id="zoom">
<option value="-1">Default</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
</select>
</span>
<span class="item">Cluster size:
<select id="size">
<option value="-1">Default</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="70">70</option>
<option value="80">80</option>
</select>
</span>
<span class="item">Cluster style:
<select id="style">
<option value="-1">Default</option>
<option value="0">People</option>
<option value="1">Conversation</option>
<option value="2">Heart</option>
<option value="3">Pin</option>
</select>
<input id="refresh" type="button" value="Refresh Map" class="item"/>
<a href="#" id="clear">Clear</a>
</div> var markerClusterer = new MarkerClusterer(map, myMarkers, {
maxZoom: 15,
zoomOnClick: false
});
//zoom 0 corresponds to a map of the Earth fully zoomed out, 20 is closeup
//markerCluster goes away after zoom
//turn off zoom on click or spiderfy won't work
您始终可以编写不同的代码，例如组合
类似这样的：
function show_hide_markers(zoom) {
var markerVisible;
for (var i = 0; i < markers.length; i++) {
if (zoom <= zoomRanges[i][1] && zoom >= zoomRanges[i][0] ) {
markerVisible = true
} else markerVisible = false;
if (markers[i].getVisible() != markersVisible) {
markers[i].setVisible(markersVisible);}
}
}
// ...
google.maps.event.addListener(map, 'zoom_changed', function () {
show_hide_markers(map.getZoom());
});
首先创建标记数组。缩放级别范围可以保存在一个单独的数组中，以某种方式与标记数组中的索引相对应（此处为 ZoomRanges）。缩放级别也可以从用于创建标记数组的原始数组（列表）中获取。
在此示例中，缩放范围单独分配给每个标记，但可以使用二维数组并为整个集群获取标记可见。
如果标记数量不是非常多，应该就足够了。可能会应用添加/删除 culd 而不是设置可见性。
与标记管理器不同（至少最近在某些情况下），即使在应用 API3 + API 密钥的情况下，它也能工作。我昨天/今天被迫这样做。