Google MarkerClusterer：低於某個縮放級別的decluster標記？

我正在使用Google MarkerClusterer。我想在地圖高於縮放級別15時將所有標記合併。Google MarkerClusterer：低於某個縮放級別的decluster標記？

在配置選項中有maxZoom設置，但是documentation does not make it clear what it is supposed to do。

我試圖將其設置如下，但地圖仍然聚集無論縮放級別我的地圖設置爲：

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

難道我做錯了什麼，有我誤解了該選項是應該做的，還是有另一種方法來解決這個問題？

來源

2013-03-07 Richard

設置this example上的maxZoom級別，將所有縮放級別爲8及以上的標記均勻化。

重現：

臺最大縮放級別7
點擊刷新映射
改變縮放級別爲0（最遠出）
點擊「+」變焦滑塊8次。

爲MarkerClustererPlus的文檔更清晰一點：

MAXZOOM |數字|啓用羣集的最大縮放級別，如果要在所有縮放級別啓用羣集，則爲null。默認值爲空。

代碼片段：

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>

來源

2013-03-07 17:05:01 geocodezip

在我的情況下，它只在構造函數中設置時才起作用。如果我之後設置，那麼maxZoom將無法工作。 – mandarin 2016-08-19 12:04:34

正是我在找的東西。非常感謝。 – rahul 2017-12-14 08:04:55

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

來源

2015-08-09 12:44:27 onlymybest

您可以隨時wrire不同的代碼，例如結合

map.getZoom（）
標記[I] .setVisible（真）（或假）和
google.maps.event.addListener（地圖， '部分zoom_changed'，...

像這樣：

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）。還可以從用於創建標記數組的原始數組（列表）中獲取縮放級別。

在此示例中，縮放範圍分別指定給每個標記，但可以使用二維數組，並且可以使用markerVisible獲取整個聚類。

如果標記數量不是非常高，則應該足夠。可能會添加/刪除文件，而不是設置可見性。

與標記管理器（至少在最近某些情況下）不同，即使在應用API3 + API密鑰的情況下，它也可以工作。我昨天/今天被迫做這個。

來源

2016-05-12 23:42:51 darekk

Google MarkerClusterer：低於某個縮放級別的decluster標記？

回答

相關問題