google-maps - marcadores - markercluster google maps
Google MarkerClusterer: ¿marcadores decluster por debajo de un cierto nivel de zoom? (3)
Al establecer el nivel de maxZoom en este ejemplo , declusters todos los marcadores para el nivel de zoom 8 y superior.
Reproducir:
- establecer el nivel de zoom máximo a 7
- haga clic en actualizar mapa
- cambia el nivel de zoom a 0 (el más alejado)
- haga clic en "+" en el control deslizante de zoom 8 veces.
La documentación para MarkerClustererPlus es un poco más clara:
maxZoom | numero | El nivel máximo de zoom en el que se habilita o nula la agrupación en clúster si se desea habilitar la agrupación en todos los niveles de zoom. El valor predeterminado es nulo.
fragmento de código:
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>
Estoy usando Google MarkerClusterer. Me gustaría quitar el brillo de todos los marcadores cuando el mapa supera el nivel de zoom 15.
Hay una configuración de maxZoom en las opciones de configuración, pero la documentación no aclara qué se supone que debe hacer .
He intentado configurarlo de la siguiente manera, pero el mapa permanece agrupado independientemente del nivel de zoom al que establezca el mapa para:
new_mc = new MarkerClusterer(map, newco_markers, {
maxZoom: 9
});
¿Estoy haciendo algo mal, he malinterpretado lo que se supone que debe hacer la opción o hay otra forma de solucionar esto?
Siempre se puede grabar un código diferente, por ejemplo, combinar
- map.getZoom (),
- marcador [i] .setVisible (verdadero) (o falso) y
- google.maps.event.addListener (mapa, ''zoom_changed'', ...
Algo como esto:
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());
});
Crea primero la matriz de marcadores. Los rangos de nivel de zoom se pueden mantener en una matriz separada correspondiente a los índices en la matriz de marcadores (zoomRanges aquí) Los niveles de zoom también se pueden tomar de la matriz original (lista) utilizada para crear la matriz de marcadores.
En este ejemplo, el rango de zoom se asigna a cada marcador de forma individual, pero se pueden utilizar matrices bidimensionales y se puede obtener markerVisible para grupos completos.
Si el número de marcadores no es extremadamente alto, debería ser suficiente. Probablemente, la adición / eliminación se puede aplicar en lugar de establecer la visibilidad.
A diferencia del administrador de marcadores (al menos recientemente en algunos casos), esto funciona incluso en API3 + API aplicada. Me vi obligado a hacer esto ayer / hoy.
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