web-dev-qa-db-ja.com

配列からマーカーを削除した後、markerclusterを更新する

私は現在、jquery uiマップでmarkerclusterプラグインを使用しています。

すべてのマーカーの1つ（markersと呼ばれる）と、検索基準に一致するマーカーの1つ（current_markersと呼ばれる）の2つの配列があります。これらは最初の配列から調整されます。

次に、画面にcurrent_markersを描画します。

しかし、markerclustererライブラリがこの変更に基づいて更新されていないことがわかりました。

では、markerclustererを更新するにはどうすればよいですか？

マーカークラスターを変数に割り当てて更新関数を呼び出すことは可能ですか？

javascriptjquerygoogle-mapsmarkerclusterer
21
jaget

マーカーオブジェクトをvarに格納し、次のようにマップの設定を解除する必要があります。

var markerCluster = new MarkerClusterer(map, markers);
/// ... later on
markerCluster.setMap(null);

これを実行したら、新しいマーカーでnew MarkerClustererを初期化できます

更新

あなたがグーグルマップのUIプラグインを使用しているので、ここにいくつかの追加のコードがあります。もちろん、クラスreset_markerclusterのボタンでもクリックを追加しました。これは、それを使用してマップを呼び出す方法を示すためのものです

var _map, _markerCluster;

$(function() {
  $('#map_canvas').gmap().bind('init', function(event, map) { 
    _map = map; // at this point you can call _map whenever you need to call the map

    // build up your markers here ...

    _markerCluster = new MarkerClusterer(_map, markers);  // you could also use map instead of _map here cause it's still present in this function
  });

  $("button.reset_markercluster").click(function(e) {
    e.preventDefault();
    _markerCluster.setMap(null);  // remove's the previous added markerCluster

    // rebuild you markers here ...

    _markerCluster = new MarkerClusterer(_map, newMarkers);

  });
});
13
Manuel van Rijn

はい、できます。

地図を作成する

MarkerClustererオブジェクトを次のように作成したと想定します。

var center = new google.maps.LatLng(10, 20);
var map = new google.maps.Map(document.getElementById('map'), { zoom: 6, center: center, mapTypeId: google.maps.MapTypeId.ROADMAP });
var markerClusterer = new MarkerClusterer(map);

マーカーを追加する

次のように複数のマーカーを追加できます。

var markers = []
var marker = new google.maps.Marker({position: center});
markers.Push(marker);
markerClusterer.addMarkers(markers);

ここでは1つしか追加していないことに注意してください。

すべてのマーカーを削除する

次に、次のようなclearMarkersを使用してすべてのマーカーをクリアできます。

markerClusterer.clearMarkers();
markers = [];

整頓のために、ここではマーカー配列の設定も解除しています。

文書

使用可能なすべてのメソッドの完全なドキュメントは、こちらから入手できます。

https://googlemaps.github.io/js-marker-clusterer/docs/reference.html

それは賢明で比較的完全なAPIです。

50
superluminary

MarkerClusterオブジェクトのclearMarkers（）メソッドを使用することをお勧めします。

http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/reference.html

9
HosseinSafy

marker-clusterer-plus にはremoveMarkersメソッドがあります：

markerCluster.removeMarkers(markers);
2
Carlo Rodríguez