web-dev-qa-db-fra.com

mettre à jour markercluster après avoir supprimé les marqueurs du tableau

J'utilise actuellement le plugin markercluster avec des cartes jquery ui.

J'ai deux tableaux, l'un de tous les marqueurs (appelés marqueurs) et l'un des marqueurs qui correspondent aux critères de recherche (appelés current_markers). Ceux-ci sont ajustés à partir du premier tableau.

Je dessine ensuite les marqueurs current_markers à l'écran.

Je constate cependant que la bibliothèque markerclusterer ne se met pas à jour en fonction de ce changement.

Alors, comment puis-je mettre à jour le markerclusterer?

Est-il possible d'affecter le marqueurcluster à une variable et d'appeler une fonction de mise à jour?

javascriptjquerygoogle-mapsmarkerclusterer
21
jaget

Vous devez stocker l'objet marqueur dans une variable, puis désactiver la carte comme suit:

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

après avoir fait cela, vous pouvez initier un new MarkerClusterer avec de nouveaux marqueurs

Mise à jour

puisque vous utilisez le plugin google maps ui, voici un code supplémentaire. J'ai ajouté un clic même sur un bouton de classe reset_markercluster ofcourse c'est juste pour montrer comment l'utiliser pour appeler la carte

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

Oui, vous pouvez.

Création de la carte

En supposant que vous avez créé votre objet MarkerClusterer quelque chose comme ceci:

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

Ajout de marqueurs

Vous pouvez y ajouter plusieurs marqueurs comme ceci:

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

Notez qu'ici, j'en ai ajouté un seul.

Suppression de tous les marqueurs

Vous pouvez ensuite effacer tous les marqueurs en utilisant clearMarkers quelque chose comme ceci:

markerClusterer.clearMarkers();
markers = [];

Notez que par ordre, j'ai également désactivé le tableau des marqueurs ici.

Documents

Une documentation complète sur toutes les méthodes disponibles est disponible ici:

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

C'est une API raisonnable et relativement complète.

50
superluminary

Il est préférable d'utiliser la méthode clearMarkers () de votre objet markerCluster:

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

9
HosseinSafy

marker-clusterer-plus a une méthode removeMarkers:

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