Google MarkerClusterer: các điểm đánh dấu bị từ chối bên dưới một mức thu phóng nhất định?

Question

Tôi đang sử dụng Google MarkerClusterer. Tôi muốn từ chối tất cả các điểm đánh dấu bất cứ khi nào bản đồ vượt quá mức thu phóng 15.

Có cài đặt maxZoom trong tùy chọn cấu hình, nhưng documentation does not make it clear what it is supposed to do.

Tôi đã cố gắng thiết lập nó như sau, nhưng bản đồ vẫn clustered bất cứ mức độ phóng tôi đặt bản đồ để:

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

Tôi có làm điều gì sai, có tôi hiểu lầm những gì các tùy chọn là nghĩa vụ phải làm, hoặc có cách nào khác để sửa lỗi này không?

Answer 1

Đặt mức maxZoom trên this example, từ chối tất cả các điểm đánh dấu cho mức thu phóng 8 trở lên.

Để tái sản xuất:

1. bộ Max mức độ phóng đến 7
2. nhấp chuột đồ refresh
3. thay đổi mức độ phóng thành 0 (xa nhất ra)
4. nhấp vào "+" trên zoom trượt 8 lần.

Các tài liệu cho MarkerClustererPlus là rõ ràng hơn một chút:

maxZoom | số | Mức thu phóng tối đa mà cụm được bật hoặc null nếu tính năng phân cụm được bật ở tất cả các mức thu phóng. Giá trị mặc định là null. Đoạn

mã:

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

Bạn luôn có thể wrire đoạn mã khác nhau, ví dụ như kết hợp

• map.getZoom(),
• đánh dấu [i] .setVisible (true) (hoặc sai) và
• google.maps.event.addListener (bản đồ, 'zoom_changed', ...

Something như thế này:

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

Tạo mảng đánh dấu trước tiên. Phạm vi mức thu phóng có thể được giữ trong một mảng riêng biệt tương ứng bằng cách nào đó để lập chỉ mục trong mảng đánh dấu (zoomRanges ở đây). Các mức thu phóng có thể được lấy từ mảng ban đầu (danh sách) được sử dụng để tạo mảng đánh dấu.

Trong phạm vi zoom ví dụ này được chỉ định cho từng điểm đánh dấu riêng lẻ, nhưng có thể sử dụng hai mảng chiều và đánh dấuVideo thu được cho toàn bộ cụm.

Nếu số điểm đánh dấu không quá cao, nó phải là đủ.Có thể thêm/gỡ bỏ culd được áp dụng thay vì thiết lập khả năng hiển thị.

Không giống như trình quản lý điểm đánh dấu (ít nhất là gần đây trong một số trường hợp), tính năng này hoạt động ngay cả trong API API + API được áp dụng. Tôi đã buộc phải làm điều này ngày hôm qua/hôm nay.