Google MarkerClusterer: indicatori di decluster al di sotto di un determinato livello di zoom?

Question

Sto usando Google MarkerClusterer. Mi piacerebbe ridurre tutti gli indicatori quando la mappa supera il livello di zoom 15.

C'è un'opzione maxZoom nelle opzioni di configurazione, ma lo documentation does not make it clear what it is supposed to do.

ho provato a fissare come segue, ma la mappa rimane cluster qualsiasi livello di zoom ho impostato la mappa per:

new_mc = new MarkerClusterer(map, newco_markers, { 
     maxZoom: 9 
    }); 

Sto facendo qualcosa di sbagliato, ho frainteso quello che l'opzione dovrebbe fare, o c'è un altro modo per risolvere questo problema?

Answer 1

Impostazione del livello maxZoom su this example, declosta tutti i marcatori per il livello di zoom 8 e superiore.

di riprodursi:

1. set Max livello di zoom per 7
2. Fare clic su Aggiorna mappa
3. cambiare il livello di zoom a 0 (il più lontano fuori)
4. fare clic sul "+" sul zoom cursore 8 volte.

La documentazione per MarkerClustererPlus è un po 'più chiaro:

maxZoom | numero | Il livello massimo di zoom al quale il clustering è abilitato o nullo se il clustering deve essere abilitato a tutti i livelli di zoom. Il valore predefinito è null.

frammento di codice:

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>

Answer 2

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 

Answer 3

si può sempre wrire codice diverso, ad esempio combinare

• map.getZoom(),
• marcatore [i] .setVisible (true) (o falso) e
• google.maps.event.addListener (mappa, 'zoom_changed', ...

Qualcosa di simile a questo:

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()); 
}); 

Creare prima un array di marker. Gli intervalli del livello di zoom possono essere mantenuti in un array separato corrispondente in qualche modo agli indici nell'array dei marcatori (zoomRanges qui). I livelli di zoom possono essere presi anche dall'array originale (elenco) utilizzato per creare l'array dei marker.

In questo esempio, l'intervallo di zoom viene assegnato a ciascun marker singolarmente, ma è possibile utilizzare array bidimensionali e marker Visible ottenuti per interi cluster.

Se il numero dei marcatori non è estremamente alto, dovrebbe essere sufficiente.Probabilmente aggiungere/rimuovere potrebbe essere applicato invece di impostare la visibilità.

A differenza del gestore di marker (almeno in alcuni casi in alcuni casi) funziona anche con API API + chiave applicata. Sono stato costretto a farlo ieri/oggi.