Google MarkerClusterer: znaczniki decluster poniżej pewnego poziomu powiększenia?

Używam Google MarkerClusterer. Chciałbym zdeklasować wszystkie znaczniki za każdym razem, gdy mapa znajdzie się powyżej poziomu powiększenia 15.Google MarkerClusterer: znaczniki decluster poniżej pewnego poziomu powiększenia?

W opcjach konfiguracyjnych znajduje się ustawienie maxZoom, ale documentation does not make it clear what it is supposed to do.

Próbowałem ustawienie go w następujący sposób, ale mapa pozostaje klastra niezależnie od poziomu powiększenia ustawić mapę do:

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

Czy robię coś źle, mają źle zrozumiałem co opcja ma robić, lub czy istnieje inny sposób, aby to naprawić?

Źródło

2013-03-07 Richard

Ustawienie poziomu maksZoom na this example, odznacza wszystkie znaczniki dla poziomu powiększenia 8 i powyżej.

Aby odtworzyć:

zestaw Max poziom zoom do 7
kliknij Refresh mapie
zmienić poziom powiększenia do 0 (najdalej na zewnątrz)
kliknij przycisk "+" na zoom suwak 8 razy.

Dokumentacja MarkerClustererPlus jest trochę jaśniej:

maxZoom | liczba | Maksymalny poziom powiększenia, przy którym włączono tworzenie klastrów lub null, jeśli klastrowanie ma być włączone na wszystkich poziomach powiększenia. Wartością domyślną jest null.

fragment kodu:

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>

Źródło

2013-03-07 17:05:01 geocodezip

W moim przypadku działało tylko wtedy, gdy ustawione w konstruktorze. Jeśli ustawię to później, to funkcja maxZoom nie będzie działać. – mandarin

Dokładnie to, czego szukałem. Wielkie dzięki. – rahul

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

Źródło

2015-08-09 12:44:27 onlymybest

Możesz zawsze wrire inny kod, na przykład połączyć

map.getZoom()
znacznik [i] .setVisible (true) (lub fałszywe) i
google.maps.event.addListener (mapa 'zoom_changed', ...

coś takiego:

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

Najpierw utwórz tablicę znaczników. Zakresy poziomów zoomu mogą być przechowywane w oddzielnej tablicy odpowiadającej w jakiś sposób indeksom w tablicy markerów (tutaj zoomRanges). Poziomy powiększenia można również pobierać z oryginalnej tablicy (listy) używanej do tworzenia tablicy markerów.

W tym przykładzie zakres zoomu jest przypisywany do każdego markera osobno, ale można użyć tablic dwuwymiarowych i uzyskać wartość Znacznik dla całych klastrów.

Jeśli liczba markerów nie jest zbyt duża, powinna wystarczyć.Prawdopodobnie dodanie/usunięcie culd zostanie zastosowane zamiast ustawienia widoczności.

W przeciwieństwie do menedżera znaczników (przynajmniej ostatnio w niektórych przypadkach) działa to nawet w przypadku zastosowania klucza API API3 +. Musiałem to zrobić wczoraj/dziś.

Źródło

2016-05-12 23:42:51 darekk

Google MarkerClusterer: znaczniki decluster poniżej pewnego poziomu powiększenia?

Odpowiedz

Powiązane problemy