Dans Google Maps API v2, si je voulais supprimer tous les marqueurs de carte, je pouvais simplement faire:
map.clearOverlays();
Comment faire cela dans l'API Google Maps v3 ?
En regardant l' API de référence , ce n'est pas clair pour moi.
Dans Google Maps API v2, si je voulais supprimer tous les marqueurs de carte, je pouvais simplement faire:
map.clearOverlays();
Comment faire cela dans l'API Google Maps v3 ?
En regardant l' API de référence , ce n'est pas clair pour moi.
Réponses:
Procédez simplement comme suit:
Déclarez une variable globale:
var markersArray = [];
II. Définissez une fonction:
function clearOverlays() {
for (var i = 0; i < markersArray.length; i++ ) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
OU
google.maps.Map.prototype.clearOverlays = function() {
for (var i = 0; i < markersArray.length; i++ ) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
III. Poussez les marqueurs dans le 'markerArray' avant d'appeler ce qui suit:
markersArray.push(marker);
google.maps.event.addListener(marker,"click",function(){});
IV. Appelez la fonction clearOverlays();
ou map.clearOverlays();
là où vous le souhaitez.
C'est ça!!
markersArray
un tableau vide au lieu de définir sa longueur, ce que je trouve un peu étrange:markersArray = [];
while
approche pour le traitement du tableau: while(markersArray.length) { markersArray.pop().setMap(null); }
. Pas besoin d'effacer le tableau après cela.
Même problème. Ce code ne fonctionne plus.
Je l'ai corrigé, changez la méthode clearMarkers de cette façon:
set_map (null) ---> setMap (null)
google.maps.Map.prototype.clearMarkers = function() {
for(var i=0; i < this.markers.length; i++){
this.markers[i].setMap(null);
}
this.markers = new Array();
};
La documentation a été mise à jour pour inclure des détails sur le sujet: https://developers.google.com/maps/documentation/javascript/markers#remove
new Array();
?
Il semble qu'il n'y ait pas encore une telle fonction dans V3.
Les gens suggèrent de conserver les références à tous les marqueurs que vous avez sur la carte dans un tableau. Et puis, lorsque vous voulez les supprimer tous, faites une boucle dans le tableau et appelez la méthode .setMap (null) sur chacune des références.
Voir cette question pour plus d'informations / code.
Ma version:
google.maps.Map.prototype.markers = new Array();
google.maps.Map.prototype.getMarkers = function() {
return this.markers
};
google.maps.Map.prototype.clearMarkers = function() {
for(var i=0; i<this.markers.length; i++){
this.markers[i].setMap(null);
}
this.markers = new Array();
};
google.maps.Marker.prototype._setMap = google.maps.Marker.prototype.setMap;
google.maps.Marker.prototype.setMap = function(map) {
if (map) {
map.markers[map.markers.length] = this;
}
this._setMap(map);
}
Le code est une version modifiée de ce code http://www.lootogo.com/googlemapsapi3/markerPlugin.html J'ai supprimé le besoin d'appeler manuellement addMarker.
Avantages
Les inconvénients
C'était la plus simple de toutes les solutions initialement publiées par YingYang le 11 mars 2014 à 15 h 04 sous la réponse d'origine à la question d'origine des utilisateurs.
J'utilise sa même solution 2,5 ans plus tard avec google maps v3.18 et cela fonctionne comme un charme
markersArray.push(newMarker) ;
while(markersArray.length) { markersArray.pop().setMap(null); }
// No need to clear the array after that.
google.maps.Map.prototype.markers = new Array();
google.maps.Map.prototype.addMarker = function(marker) {
this.markers[this.markers.length] = marker;
};
google.maps.Map.prototype.getMarkers = function() {
return this.markers
};
google.maps.Map.prototype.clearMarkers = function() {
for(var i=0; i<this.markers.length; i++){
this.markers[i].setMap(null);
}
this.markers = new Array();
};
Je ne pense pas qu'il y en ait un dans V3, j'ai donc utilisé l'implémentation personnalisée ci-dessus.
Avertissement: je n'ai pas écrit ce code mais j'ai oublié de conserver une référence lorsque je l'ai fusionné dans ma base de code, donc je ne sais pas d'où il vient.
Sur la nouvelle version v3, ils ont recommandé de conserver les tableaux. comme suit.
Voir l'exemple à l' overlay-overview .
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;
}
}
La galerie de démonstration de Google propose une démonstration sur la façon dont ils le font:
http://code.google.com/apis/maps/documentation/javascript/examples/overlay-remove.html
Vous pouvez afficher le code source pour voir comment ils ajoutent des marqueurs.
Pour faire court, ils gardent les marqueurs dans un tableau global. Lors de leur effacement / suppression, ils bouclent le tableau et appellent ".setMap (null)" sur l'objet marqueur donné.
Cependant, cet exemple montre une «astuce». "Effacer" pour cet exemple signifie les supprimer de la carte mais les conserver dans le tableau, ce qui permet à l'application de les ajouter rapidement à la carte. Dans un sens, cela revient à "les cacher".
"Supprimer" efface également le tableau.
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);
}
travailler sur chrome, firefox, c'est à dire ...
La solution est assez simple. Vous pouvez utiliser la méthode: marker.setMap(map);
. Ici, vous définissez sur quelle carte apparaîtra l'épingle.
Donc, si vous définissez null
cette méthode ( marker.setMap(null);
), la broche disparaîtra.
Maintenant, vous pouvez écrire une fonction qui fait disparaître tous les marqueurs de votre carte.
Vous venez d'ajouter pour mettre vos broches dans un tableau et 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 de définir ou de supprimer 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 supprimer 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 = [];
}
Ceci est mon code complet. C'est le plus simple que je puisse réduire.
Attention, vous pouvez remplacer YOUR_API_KEY
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 le développeur Google ou la documentation complète sur, également, le site Web du développeur Google .
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) ;
}
La set_map
fonction " " publiée dans les deux réponses semble ne plus fonctionner dans l'API Google Maps v3.
je me demande ce qui est arrivé
Mise à jour:
Il semble que Google ait modifié son API de sorte que " set_map
" ne soit pas " setMap
".
http://code.google.com/apis/maps/documentation/v3/reference.html
Vous trouverez ici un exemple de suppression de marqueurs:
https://developers.google.com/maps/documentation/javascript/examples/marker-remove?hl=es
// Add 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 setAllMap(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() {
setAllMap(null);
}
// Deletes all markers in the array by removing references to them.
function deleteMarkers() {
clearMarkers();
markers = [];
}
Ce qui suit d'Anon fonctionne parfaitement, bien qu'avec des scintillements lors de la suppression répétée des superpositions.
Procédez simplement comme suit:
Déclarez une variable globale:
var markersArray = [];
II. Définissez une fonction:
function clearOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
}
}
III. Poussez les marqueurs dans le 'markerArray' avant d'appeler ce qui suit:
markersArray.push(marker);
google.maps.event.addListener(marker,"click",function(){});
IV. Appelez la clearOverlays()
fonction où vous le souhaitez.
C'est ça!!
J'espère que cela vous aidera.
for(in in markersArray){}
ne fait probablement pas ce que vous attendez de lui. Si Array
est étendu ailleurs dans le code, il itérera également sur ces propriétés, et pas seulement sur les index. La version javascript de celle- markersArray.forEach()
ci n'est pas prise en charge partout. Vous seriez mieux avecfor(var i=0; i<markersArray.length; ++i){ markersArray.setMap(null); }
J'ai trouvé que l'utilisation de la bibliothèque markermanager dans le projet google-maps-utility-library-v3 était la manière la plus simple.
1. Configurez le MarkerManager
mgr = new MarkerManager(map);
google.maps.event.addListener(mgr, 'loaded', function () {
loadMarkers();
});
2. Ajoutez des marqueurs au MarkerManager
function loadMarkers() {
var marker = new google.maps.Marker({
title: title,
position: latlng,
icon: icon
});
mgr.addMarker(marker);
mgr.refresh();
}
3. Pour effacer les marqueurs, il vous suffit d'appeler la clearMarkers()
fonction MarkerManger
mgr.clearMarkers();
clearMarkers
suffit d'itérer sur les marqueurs appelant marker.setMap(null)
(j'ai vérifié la source). Ce serait moins de travail de les mettre dans un tableau et de le faire vous-même.
Pour effacer toutes les superpositions, y compris les polys, les marqueurs, etc.
utilisez simplement:
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);}
Voici une fonction que j'ai écrite pour le faire me former sur une application cartographique:
function clear_Map() {
directionsDisplay = new google.maps.DirectionsRenderer();
//var chicago = new google.maps.LatLng(41.850033, -87.6500523);
var myOptions = {
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: HamptonRoads
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
}
Pour supprimer tous les marqueurs de la carte, créez des fonctions comme ceci:
1.addMarker (emplacement): cette fonction permet d'ajouter un marqueur sur la carte
2.clearMarkers (): cette fonction supprime tous les marqueurs de la carte, pas du tableau
3.setMapOnAll (map): cette fonction permet d'ajouter des informations de marqueurs dans le tableau
4. supprimer les marqueurs (): cette fonction supprime tous les marqueurs du tableau en supprimant les références à ceux-ci.
// 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);
}
// Deletes all markers in the array by removing references to them.
function deleteMarkers() {
clearMarkers();
markers = [];
}
La manière la plus propre de procéder consiste à parcourir toutes les fonctionnalités de la carte. Les marqueurs (avec les polygones, les polylignes, etc.) sont stockés dans la couche de données de la carte.
function removeAllMarkers() {
map.data.forEach((feature) => {
feature.getGeometry().getType() === 'Point' ? map.data.remove(feature) : null
});
}
Dans le cas où les marqueurs sont ajoutés via le gestionnaire de dessins , il est préférable de créer un tableau global de marqueurs ou de pousser les marqueurs dans la couche de données lors de la création comme suit:
google.maps.event.addListener(drawingManager, 'overlaycomplete', (e) => {
var newShape = e.overlay;
newShape.type = e.type;
if (newShape.type === 'marker') {
var pos = newShape.getPosition()
map.data.add({ geometry: new google.maps.Data.Point(pos) });
// remove from drawing layer
newShape.setMap(null);
}
});
Je recommande la deuxième approche car elle vous permet d'utiliser d'autres méthodes de classe google.maps.data plus tard.
C'est la méthode que Google utilise elle-même dans au moins un échantillon:
var markers = [];
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
Consultez l'exemple Google pour un exemple de code complet:
https://developers.google.com/maps/documentation/javascript/examples/places-searchbox
Je ne sais pas pourquoi, mais le réglage setMap(null)
de mes marqueurs n'a pas fonctionné pour moi lorsque j'utilise DirectionsRenderer
.
Dans mon cas, j'ai dû également appeler setMap(null)
mon DirectionsRenderer
.
Quelque chose comme ca:
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
if (map.directionsDisplay) {
map.directionsDisplay.setMap(null);
}
map.directionsDisplay = directionsDisplay;
var request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.DRIVING
};
directionsDisplay.setMap(map);
directionsService.route(request, function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
effacez googlemap
mGoogle_map.clear();
J'ai essayé toutes les solutions proposées, mais rien n'a fonctionné pour moi alors que tous mes marqueurs étaient sous un cluster. Finalement, je viens de mettre ceci:
var markerCluster = new MarkerClusterer(map, markers,
{ imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m' });
agentsGpsData[agentGpsData.ID].CLUSTER = markerCluster;
//this did the trick
agentsGpsData[agentId].CLUSTER.clearMarkers();
En d'autres termes, si vous encapsulez des marqueurs dans un cluster et souhaitez supprimer tous les marqueurs, vous appelez:
clearMarkers();
Vous voulez dire supprimer comme en les cachant ou en les supprimant?
s'il se cache:
function clearMarkers() {
setAllMap(null);
}
si vous souhaitez les supprimer:
function deleteMarkers() {
clearMarkers();
markers = [];
}
notez que j'utilise un tableau de marqueurs pour garder une trace d'eux et le réinitialiser manuellement.
Vous devez définir la carte nulle sur ce marqueur.
var markersList = [];
function removeMarkers(markersList) {
for(var i = 0; i < markersList.length; i++) {
markersList[i].setMap(null);
}
}
function addMarkers() {
var marker = new google.maps.Marker({
position : {
lat : 12.374,
lng : -11.55
},
map : map
});
markersList.push(marker);
}
J'utilise un raccourci qui fait bien le travail. Fais juste
map.clear();
si vous utilisez le plugin gmap V3:
$("#map").gmap("removeAllMarkers");
voir: http://www.smashinglabs.pl/gmap/documentation#after-load
Je sais que c'est peut-être une solution simple, mais c'est ce que je fais
$("#map_canvas").html("");
markers = [];
Fonctionne à chaque fois pour moi.