问题描述
我正在使用Google MarkerClusterer。我希望每当地图变得高于缩放级别15时将所有标记去掉。
有一个 maxZoom
设置配置选项,但。
我已经尝试将其设置如下,但是无论我设置地图的缩放级别如何,地图都会保持聚集:
new_mc = new MarkerClusterer(map,newco_markers,{
maxZoom:9
});
我做错了什么,我误解了该选项应该做什么,还是有另一个如何解决这个问题?
在,将所有缩放级别为8以上的标记进行分组。
$ b
重现:
- 将最大缩放级别设置为7
- 点击刷新地图
- 将缩放级别更改为0(最远)
- 点击+缩放滑块8次。
更清晰一些:
代码片段:
$ b
var styles = [[{url:'https://googlemaps.github.io/js-marker-clusterer/images/people35.png',height:35,width:35 ,anchor:[16,0],textColor:'#ff00ff',textSize:10},{url:'https://googlemaps.github.io/js-marker-clusterer/images/people45.png',height: 45,width:45,anchor:[24,0],textColor:'#ff0000',textSize:11},{url:'https://googlemaps.github.io/js-marker-clusterer/images/people55。 png',height:55,width:55,anchor:[32,0],textColor:'#ffffff',textSize:12}],[{url:'https://googlemaps.github.io/js-marker -clusterer / images / conv30.png',height:27,width:30,anchor:[3,0],textColor:'#ff00ff',textSize:10 },{url:'https://googlemaps.github.io/js-marker-clusterer/images/conv40.png',height:36,width:40,anchor:[6,0],textColor:'#ff0000 ',textSize:11},{url:'https://googlemaps.github.io/js-marker-clusterer/images/conv50.png',width:50,height:45,anchor:[8,0], textSize:12}],[{url:'https://googlemaps.github.io/js-marker-clusterer/images/heart30.png',height:26,width:30,anchor:[4,0], textColor:'#ff00ff',textSize:10},{url:'https://googlemaps.github.io/js-marker-clusterer/images/heart40.png',height:35,width:40,anchor:[ 8,0],textColor:'#ff0000',textSize:11},{url:'https://googlemaps.github.io/js-marker-clusterer/images/heart50.png',width:50,height: 44,anchor:[12,0],textSize:12}],[{url:'https://googlemaps.github.io/js-marker-clusterer/images/pin.png',height:48,width: 30,anchor:[-18,0],textC olor:'#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';函数refreshMap(){if(markerClusterer){markerClusterer.clearMarkers(); } var markers = []; var markerImage = new google.maps.MarkerImage(imageUrl,new google.maps.Size(24,32)); for(var i = 0; i
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; {0};}#inline-actions {padding-top:10px;}。item {margin-left:20px;}
< script src =https://maps.googleapis.com/maps/api/js>< / script>< script src = https://googlemaps.github.io/js-marker-clusterer/examples/data.json\"></script><script src =https://googlemaps.github.io/js-marker-clusterer /src/markerclusterer.js\"></script><h3> MarkerClusterer v3的示例< / h3>< div id =map-container> < div id =map>< / div>< / div>< div id =inline-actions> < span>最大缩放级别:< select id =zoom> < option value = - 1>默认< / 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> < /选择> < /跨度> < span class =item>群集大小:< select id =size> < option value = - 1>默认< / option> < option value =40> 40< / option> < option value =50> 50< / option> < option value =70> 70< / option> < option value =80> 80< / option> < /选择> < /跨度> < span class =item>群集样式:< select id =style> < option value = - 1>默认< / option> < option value =0>人物< / option> < option value =1>对话< / option> < option value =2> Heart< / option> < option value =3> Pin< / option> < /选择> < input id =refreshtype =buttonvalue =Refresh Mapclass =item/> < a href =#id =clear>清除< / a> < / div>
I'm using Google MarkerClusterer. I'd like to decluster all the markers whenever the map goes above zoom level 15.
There is a maxZoom
setting in the configuration options, but the documentation does not make it clear what it is supposed to do.
I have tried setting it as follows, but the map remains clustered whatever zoom level I set the map to:
new_mc = new MarkerClusterer(map, newco_markers, {
maxZoom: 9
});
Am I doing something wrong, have I misunderstood what the option is supposed to do, or is there another way to fix this?
Setting the maxZoom level on this example, declusters all the markers for zoom level 8 and above.
To reproduce:
- set Max zoom level to 7
- click refresh map
- change the zoom level to 0 (the furthest out)
- click the "+" on the zoom slider 8 times.
The documentation for MarkerClustererPlus is a little clearer:
code snippet:
var styles = [
[{
url: 'https://googlemaps.github.io/js-marker-clusterer/images/people35.png',
height: 35,
width: 35,
anchor: [16, 0],
textColor: '#ff00ff',
textSize: 10
}, {
url: 'https://googlemaps.github.io/js-marker-clusterer/images/people45.png',
height: 45,
width: 45,
anchor: [24, 0],
textColor: '#ff0000',
textSize: 11
}, {
url: 'https://googlemaps.github.io/js-marker-clusterer/images/people55.png',
height: 55,
width: 55,
anchor: [32, 0],
textColor: '#ffffff',
textSize: 12
}],
[{
url: 'https://googlemaps.github.io/js-marker-clusterer/images/conv30.png',
height: 27,
width: 30,
anchor: [3, 0],
textColor: '#ff00ff',
textSize: 10
}, {
url: 'https://googlemaps.github.io/js-marker-clusterer/images/conv40.png',
height: 36,
width: 40,
anchor: [6, 0],
textColor: '#ff0000',
textSize: 11
}, {
url: 'https://googlemaps.github.io/js-marker-clusterer/images/conv50.png',
width: 50,
height: 45,
anchor: [8, 0],
textSize: 12
}],
[{
url: 'https://googlemaps.github.io/js-marker-clusterer/images/heart30.png',
height: 26,
width: 30,
anchor: [4, 0],
textColor: '#ff00ff',
textSize: 10
}, {
url: 'https://googlemaps.github.io/js-marker-clusterer/images/heart40.png',
height: 35,
width: 40,
anchor: [8, 0],
textColor: '#ff0000',
textSize: 11
}, {
url: 'https://googlemaps.github.io/js-marker-clusterer/images/heart50.png',
width: 50,
height: 44,
anchor: [12, 0],
textSize: 12
}],
[{
url: 'https://googlemaps.github.io/js-marker-clusterer/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() {
if (markerClusterer) {
markerClusterer.clearMarkers();
}
var markers = [];
var markerImage = new google.maps.MarkerImage(imageUrl,
new google.maps.Size(24, 32));
for (var i = 0; i < 1000; ++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://googlemaps.github.io/js-marker-clusterer/images/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);
refreshMap();
}
function clearClusters(e) {
e.preventDefault();
e.stopPropagation();
markerClusterer.clearMarkers();
}
google.maps.event.addDomListener(window, 'load', initialize);
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://maps.googleapis.com/maps/api/js"></script>
<script src="https://googlemaps.github.io/js-marker-clusterer/examples/data.json"></script>
<script src="https://googlemaps.github.io/js-marker-clusterer/src/markerclusterer.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>
这篇关于Google MarkerClusterer:低于某个缩放级别的decluster标记?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!