google-maps - Google MarkerClusterer: 特定のズームレベル以下のマーカーをクラスタ化解除しますか?

Question

Google MarkerClusterer を使用しています。マップがズームレベル 15 を超えるたびに、すべてのマーカーをデクラスターしたいと考えています。

構成オプションにはmaxZoom設定がありますが、ドキュメントでは、それが何をすべきかが明確ではありません。

次のように設定しようとしましたが、マップに設定したズームレベルに関係なく、マップはクラスター化されたままです。

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

私は何か間違ったことをしていますか、オプションが何をすべきかを誤解していますか、それともこれを修正する別の方法はありますか?

score 22 · Accepted Answer

この例でmaxZoom レベルを設定すると、ズームレベル 8 以上のすべてのマーカーが非クラスタ化されます。

(有効なキーを使用した例の作業バージョン、github の元の例は、キーが必要になる前のものです)

再現するには：

最大ズームレベルを 7 に設定します
マップの更新をクリック
ズームレベルを 0 (最も遠い) に変更します。
ズームスライダーの「+」を 8 回クリックします。

MarkerClustererPlusのドキュメントはもう少し明確です。

最大ズーム | 数 | クラスタリングが有効になる最大ズームレベル。クラスタリングがすべてのズームレベルで有効になる場合は null。デフォルト値はヌルです。

コードスニペット：

var styles = [
  [{
    url: 'https://cdn.jsdelivr.net/npm/marker-clusterer-plus@2.1.4/images/people35.png',
    height: 35,
    width: 35,
    anchor: [16, 0],
    textColor: '#ff00ff',
    textSize: 10
  }, {
    url: 'https://cdn.jsdelivr.net/npm/marker-clusterer-plus@2.1.4/images/people45.png',
    height: 45,
    width: 45,
    anchor: [24, 0],
    textColor: '#ff0000',
    textSize: 11
  }, {
    url: 'https://cdn.jsdelivr.net/npm/marker-clusterer-plus@2.1.4/images/people55.png',
    height: 55,
    width: 55,
    anchor: [32, 0],
    textColor: '#ffffff',
    textSize: 12
  }],
  [{
    url: 'https://cdn.jsdelivr.net/npm/marker-clusterer-plus@2.1.4/images/conv30.png',
    height: 27,
    width: 30,
    anchor: [3, 0],
    textColor: '#ff00ff',
    textSize: 10
  }, {
    url: 'https://cdn.jsdelivr.net/npm/marker-clusterer-plus@2.1.4/images/conv40.png',
    height: 36,
    width: 40,
    anchor: [6, 0],
    textColor: '#ff0000',
    textSize: 11
  }, {
    url: 'https://cdn.jsdelivr.net/npm/marker-clusterer-plus@2.1.4/images/conv50.png',
    width: 50,
    height: 45,
    anchor: [8, 0],
    textSize: 12
  }],
  [{
    url: 'https://cdn.jsdelivr.net/npm/marker-clusterer-plus@2.1.4/images/heart30.png',
    height: 26,
    width: 30,
    anchor: [4, 0],
    textColor: '#ff00ff',
    textSize: 10
  }, {
    url: 'https://cdn.jsdelivr.net/npm/marker-clusterer-plus@2.1.4/images/heart40.png',
    height: 35,
    width: 40,
    anchor: [8, 0],
    textColor: '#ff0000',
    textSize: 11
  }, {
    url: 'https://cdn.jsdelivr.net/npm/marker-clusterer-plus@2.1.4/images/heart50.png',
    width: 50,
    height: 44,
    anchor: [12, 0],
    textSize: 12
  }],
  [{
    url: 'https://cdn.jsdelivr.net/npm/marker-clusterer-plus@2.1.4/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(data) {
  if (markerClusterer) {
    markerClusterer.clearMarkers();
  }

  var markers = [];

  var markerImage = new google.maps.MarkerImage(imageUrl,
    new google.maps.Size(24, 32));

  for (var i = 0; i < data.photos.length; ++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://developers.google.com/maps/documentation/javascript/examples/markerclusterer/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);

  $.getJSON("https://api.myjson.com/bins/6ad78", function(data, textStatus, jqXHR) {
    console.log(textStatus);
    refreshMap(data);
  });
}

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://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<!-- scr -- ipt src="https://googlemaps.github.io/js-marker-clusterer/examples/data.json"></scr -- ipt -->
<script src="https://unpkg.com/@google/markerclustererplus@4.0.1/dist/markerclustererplus.min.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>

score 11 · Accepted Answer

 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

score 0 · Accepted Answer

たとえば、結合するなど、いつでも異なるコードを書くことができます

map.getZoom()、
marker[i].setVisible(true) (または false) および
google.maps.event.addListener(map, '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)。ズームレベルは、マーカー配列の作成に使用された元の配列 (リスト) から取得することもできます。

この例では、ズーム範囲が各マーカーに個別に割り当てられていますが、2 次元配列を使用して、クラスター全体の markerVisible を取得することができます。

マーカーの数が極端に多くない場合は、それで十分です。可視性を設定する代わりに、カルドの追加/削除が適用される可能性があります。

マーカーマネージャーとは異なり (場合によっては少なくとも最近)、これは API3 + API キーが適用されていても機能します。私は昨日/今日これをすることを余儀なくされました。

google-maps - Google MarkerClusterer: 特定のズーム レベル以下のマーカーをクラスタ化解除しますか?

3 に答える 3

Related

Reference

google-maps - Google MarkerClusterer: 特定のズームレベル以下のマーカーをクラスタ化解除しますか?