Mettre à jour le regroupement de marqueurs après avoir supprimé des marqueurs du tableau

Question

Je suis actuellement en train d'utiliser le plugin markercluster avec jquery ui maps.

J'ai deux tableaux, un pour tous les marqueurs (appelé markers) et un pour les marqueurs qui correspondent aux critères de recherche (appelé current_markers). Ces derniers sont filtrés à partir du premier tableau.

Ensuite, je dessine les current_markers sur l'écran.

Cependant, je constate que la bibliothèque markerclusterer ne se met pas à jour en fonction de ce changement.

Comment puis-je mettre à jour le markerclusterer ?

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

Answer 1

Oui, tu peux.

Création de la carte

En supposant que tu aies créé ton 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 ajouter plusieurs marqueurs de cette manière :

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

Notez que j'ai ajouté seulement un ici.

Suppression de tous les marqueurs

Vous pouvez ensuite effacer tous les marqueurs en utilisant clearMarkers de cette manière :

markerClusterer.clearMarkers();
markers = [];

Notez que pour plus de propreté, j'ai également annulé le tableau des marqueurs ici.

Docs

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

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

Lien mis à jour : https://googlemaps.github.io/js-markerclustererplus/classes/markerclusterer.html#clearmarkers

C'est une API sensée et relativement complète.

Answer 2

Vous devriez stocker l'objet marqueur dans une variable et ensuite annuler la carte comme suit :

var markerCluster = new MarkerClusterer(map, markers);
/// ... plus tard
markerCluster.setMap(null);

après avoir fait cela, vous pourriez initialiser un nouveau MarkerClusterer avec de nouveaux marqueurs

Mettre à jour

puisque vous utilisez le plugin d'interface utilisateur de Google Maps, voici un peu de code supplémentaire. J'ai ajouté un événement clic sur un bouton avec la classe reset_markercluster, bien sûr ceci 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; // à ce moment, vous pouvez appeler _map chaque fois que vous avez besoin d'appeler la carte

    // construisez vos marqueurs ici ...

    _markerCluster = new MarkerClusterer(_map, markers);  // vous pourriez également utiliser map à la place de _map ici car il est toujours présent dans cette fonction
  });

  $("button.reset_markercluster").click(function(e) {
    e.preventDefault();
    _markerCluster.setMap(null);  // supprime le marqueurCluster précédemment ajouté

    // reconstruisez vos marqueurs ici ...

    _markerCluster = new MarkerClusterer(_map, nouveauxMarqueurs);

  });
});

Answer 3

Il vaut mieux utiliser la méthode clearMarkers() de votre objet markerCluster :

http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/reference.html référence mise à jour : https://googlemaps.github.io/js-markerclustererplus/classes/markerclusterer.html#clearmarkers

Answer 4

marker-clusterer-plus possède une méthode removeMarkers :

markerCluster.removeMarkers(markers);

Answer 5

Vous pouvez gérer ainsi.

1. Créez une variable de regroupement vide

   var \_markerCluster;

2. Stockez l'objet de regroupement dans notre variable.

   _markerCluster = new MarkerClusterer(map, markers, { imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m', });

3. Quand vous retirez un marqueur, vous devez écrire le code suivant.

   try{
        \_markerCluster.clearMarkers();
   }catch(e){
   
   }