API Google Maps v3 : comment supprimer tous les marqueurs ?

Question

API Google Maps v3 : comment supprimer tous les marqueurs ?

Demandé el 9 de Octobre, 2009: Quand la question a-t-elle été
270905 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Ouvert: Situation réelle de la question

Dans l'API Google Maps v2, si je voulais supprimer tous les marqueurs de carte, je pouvais simplement le faire :

map.clearOverlays();

Comment faire dans l'API de Google Maps v3 ?

En regardant le API de référence c'est pas clair pour moi.

Demandé el 9 de Octobre, 2009 par mp_

3 votes

J'ai trouvé un peu de code au lien ci-dessous, mais bon sang - c'est beaucoup de code pour simuler la précédente ligne de code dans la v2 de l'API. lootogo.com/googlemapsapi3/markerPlugin.html

Commenté el 9 de Octobre, 2009 par mp_

2 votes

N'oubliez pas que maps 3.0 est censé être TRÈS léger afin que les appareils mobiles puissent l'utiliser avec le moins de décalage possible...

Commenté el 9 de Octobre, 2009 par Petrogad

1 votes

Les solutions proposées ici semblent ne pas fonctionner à partir du 29/07/2010. J'aimerais avoir une version fonctionnelle à proposer à la place.

Commenté el 30 de Juillet, 2010 par Jonathan Hanson

Afficher 3 autres commentaires

Answer 1

5 Réponses

Answer 2

19voto

Jirapong Points 12684

Dans la nouvelle version v3, il est recommandé de les conserver dans des tableaux, comme suit.

Voir l'échantillon à superposition-aperception .

var map;
var markersArray = [];

function initialize() {
  var haightAshbury = new google.maps.LatLng(37.7699298, -122.4469157);
  var mapOptions = {
    zoom: 12,
    center: haightAshbury,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };
  map =  new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

  google.maps.event.addListener(map, 'click', function(event) {
    addMarker(event.latLng);
  });
}

function addMarker(location) {
  marker = new google.maps.Marker({
    position: location,
    map: map
  });
  markersArray.push(marker);
}

// Removes the overlays from the map, but keeps them in the array
function clearOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(null);
    }
  }
}

// Shows any overlays currently in the array
function showOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(map);
    }
  }
}

// Deletes all markers in the array by removing references to them
function deleteOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(null);
    }
    markersArray.length = 0;
  }
}

Répondu el 17 de Novembre, 2010 par Jirapong (12684 Points )

Answer 3

9voto

SphynxTech Points 1031

La solution est assez simple. Vous pouvez utiliser la méthode : marker.setMap(map); . Ici, vous définissez sur quelle carte l'épingle apparaîtra.

Donc, si vous définissez null dans cette méthode ( marker.setMap(null); ), l'épingle disparaîtra.

Maintenant, vous pouvez écrire une fonction qui fera disparaître tous les marqueurs de votre carte.

Il suffit de mettre vos broches dans un tableau et de les déclarer avec markers.push (your_new pin) ou ce code par exemple :

// Adds a marker to the map and push to the array.
function addMarker(location) {
  var marker = new google.maps.Marker({
    position: location,
    map: map
  });
  markers.push(marker);
}

Il s'agit d'une fonction qui permet d'activer ou de désactiver tous les marqueurs de votre tableau dans la carte :

// Sets the map on all markers in the array.
  function setMapOnAll(map) {
    for (var i = 0; i < markers.length; i++) {
      markers[i].setMap(map);
    }
  }

Pour faire disparaître tous vos marqueurs, vous devez appeler la fonction avec null :

// Removes the markers from the map, but keeps them in the array.
  function clearMarkers() {
    setMapOnAll(null);
  }

Et, pour supprimer et faire disparaître, tous vos marqueurs, vous devez réinitialiser votre tableau de marqueurs comme ceci :

// Deletes all markers in the array by removing references to them.
  function deleteMarkers() {
    clearMarkers();
    markers = [];
  }

Voici mon code complet. C'est le plus simple auquel j'ai pu le réduire. Soyez attentif vous pouvez remplacer YOUR_API_KEY dans le code par votre clé google API :

<!DOCTYPE html>
<html>
  <head>
  <title>Remove Markers</title>
  <style>
     /* Always set the map height explicitly to define the size of the div
     * element that contains the map. */
     #map {
       height: 100%;
       }
  </style>
</head>
<body>

<div id="map"></div>
<p>Click on the map to add markers.</p>
<script>

  // In the following example, markers appear when the user clicks on the map.
  // The markers are stored in an array.
  // The user can then click an option to hide, show or delete the markers.
  var map;
  var markers = [];

  function initMap() {
    var haightAshbury = {lat: 37.769, lng: -122.446};

    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 12,
      center: haightAshbury,
      mapTypeId: 'terrain'
    });

    // This event listener will call addMarker() when the map is clicked.
    map.addListener('click', function(event) {
      addMarker(event.latLng);
    });

    // Adds a marker at the center of the map.
    addMarker(haightAshbury);
  }

   // Adds a marker to the map and push to the array.
  function addMarker(location) {
    var marker = new google.maps.Marker({
      position: location,
      map: map
    });
    markers.push(marker);
  }

  // Sets the map on all markers in the array.
  function setMapOnAll(map) {
    for (var i = 0; i < markers.length; i++) {
      markers[i].setMap(map);
    }
  }

  // Removes the markers from the map, but keeps them in the array.
  function clearMarkers() {
    setMapOnAll(null);
  }

  // Shows any markers currently in the array.
  function showMarkers() {
    setMapOnAll(map);
  }

  // Deletes all markers in the array by removing references to them.
  function deleteMarkers() {
    clearMarkers();
    markers = [];
  }

</script>
   <script async defer
    src="https://maps.googleapis.com/maps/api/js key=YOUR_API_KEY&callback=initMap">
   </script>
</body>
</html>

Vous pouvez consulter développeur google ou la documentation complète sur, également, site web du développeur google .

Répondu el 6 de Avril, 2017 par SphynxTech (1031 Points )

Answer 4

6voto

Adam Starrh Points 2103

Une application propre et facile de la réponse de Rolinger.

function placeMarkerAndPanTo(latLng, map) {
      while(markersArray.length) { markersArray.pop().setMap(null); }
      var marker = new google.maps.Marker({
        position: latLng,
        map: map
      });
      map.panTo(latLng);

      markersArray.push(marker) ;
    }

Répondu el 14 de Septembre, 2015 par Adam Starrh (2103 Points )

Answer 5

6voto

jmbertucci Points 3377

La Galerie de démonstrations de Google présente une démonstration de la manière dont ils procèdent :

http://code.google.com/apis/maps/documentation/javascript/examples/overlay-remove.html

Vous pouvez consulter le code source pour voir comment ils ajoutent des marqueurs.

Pour faire court, ils conservent les marqueurs dans un tableau global. Pour les effacer, ils parcourent le tableau en boucle et appellent ".setMap(null)" sur l'objet marqueur donné.

Toutefois, cet exemple montre une "astuce". "Effacer" dans cet exemple signifie les supprimer de la carte mais les conserver dans le tableau, ce qui permet à l'application de les réinsérer rapidement dans la carte. Dans un sens, cela revient à les "cacher".

"Supprimer" efface également le tableau.

Répondu el 11 de Janvier, 2011 par jmbertucci (3377 Points )

Answer 6

6voto

Nguoi Viet Nam Points 51

for (i in markersArray) {
  markersArray[i].setMap(null);
}

ne fonctionne que sur IE.

for (var i=0; i<markersArray.length; i++) {
  markersArray[i].setMap(null);
}

fonctionne sur chrome, firefox, ie...

Répondu el 3 de Décembre, 2012 par Nguoi Viet Nam (51 Points )

1 votes

Veuillez lire l'aide concernant le le formatage du code sur le SO

Commenté el 3 de Décembre, 2012 par freefaller

API Google Maps v3 : comment supprimer tous les marqueurs ?

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

API Google Maps v3 : comment supprimer tous les marqueurs ?

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: