javascript - varios - google maps marker example




Google Maps API v3: ¿Cómo eliminar todos los marcadores? (20)

En Google Maps API v2, si quisiera eliminar todos los marcadores de mapa, simplemente podría hacer:

map.clearOverlays();

¿Cómo hago esto en Google Maps API v3 ?

En cuanto a la API de referencia , no está claro para mí.


¿Quieres decir eliminar como ocultarlos o eliminarlos?

si se esconde:

function clearMarkers() {
            setAllMap(null);
        }

Si desea borrarlos:

 function deleteMarkers() {
            clearMarkers();
            markers = [];
        }

Observe que utilizo una matriz de marcadores para realizar un seguimiento de ellos y restablecerlo manualmente.


Acabo de intentar esto con kmlLayer.setMap (nulo) y funcionó. No estoy seguro de si eso funcionaría con marcadores regulares pero parece funcionar correctamente.


El mismo problema. Este código ya no funciona.

Lo he corregido, cambiar el método de clearMarkers de esta manera:

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 documentación se ha actualizado para incluir detalles sobre el tema: https://developers.google.com/maps/documentation/javascript/markers#remove


En la nueva versión v3, recomendaron mantener en matrices. como sigue

Ver muestra en 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;
  }
}

Es necesario establecer el mapa nulo a ese marcador.

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

Esta fue la más simple de todas las soluciones publicadas originalmente por YingYang el 11 de marzo de 2014 a las 15: 049 en la respuesta original a la pregunta original de los usuarios

Estoy usando su misma solución 2.5 años después con google maps v3.18 y funciona como un encanto

markersArray.push(newMarker) ;
while(markersArray.length) { markersArray.pop().setMap(null); }

// No need to clear the array after that.

He probado todas las soluciones propuestas, pero nada me funcionó mientras todos mis marcadores estaban debajo de un grupo. Eventualmente acabo de poner esto:

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 otras palabras, si envuelve los marcadores en un clúster y desea eliminar todos los marcadores, debe llamar a:

clearMarkers();

La forma más limpia de hacerlo es recorrer todas las características del mapa. Los marcadores (junto con polígonos, polilíneas, etc.) se almacenan en la capa de datos del mapa.

function removeAllMarkers() {
  map.data.forEach((feature) => {
    feature.getGeometry().getType() === 'Point' ? map.data.remove(feature) : null
  });
}

En el caso de que los marcadores se agreguen a través del administrador de dibujos , es mejor crear una matriz global de marcadores o empujar los marcadores en la capa de datos al crearlos, de este modo:

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

Recomiendo el segundo enfoque, ya que le permite usar otros métodos de clase google.maps.data más adelante.


La galería de demostración de Google tiene una demostración de cómo lo hacen:

overlay-overview

Puedes ver el código fuente para ver cómo agregan marcadores.

En resumen, mantienen los marcadores en una matriz global. Al borrarlos / borrarlos, recorren la matriz y llaman ".setMap (null)" en el objeto marcador dado.

Sin embargo, este ejemplo muestra un 'truco'. "Borrar" para este ejemplo significa eliminarlos del mapa pero mantenerlos en la matriz, lo que permite que la aplicación los agregue rápidamente al mapa. En cierto sentido, esto actúa como "esconderlos".

"Eliminar" también borra la matriz.


La solución es bastante fácil. Puede usar el método: marker.setMap(map); . Aquí, usted define en qué mapa aparecerá el pin.

Por lo tanto, si establece null en este método ( marker.setMap(null); ), el pin desaparecerá.

Ahora, puede escribir una función que haga desaparecer todos los marcadores en su mapa.

Simplemente agregue para poner sus pins en una matriz y declararlos con markers.push (your_new pin) o este código, por ejemplo:

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

Esta es una función que puede configurar o eliminar todos los marcadores de su matriz en el mapa:

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

Para desaparecer todos sus marcadores, debe llamar a la función con null :

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

Y, para eliminar y desaparecer, todos sus marcadores, debe restablecer su matriz de marcadores de esta manera:

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

Este es mi código completo. Es lo más simple que podría reducir. Tenga cuidado , puede reemplazar YOUR_API_KEY en el código con su clave API de Google:

<!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>

Puede consultar el desarrollador de Google o la documentación completa en, también, el sitio web de desarrollador de Google .


No sé por qué, pero la configuración de setMap(null) en mis marcadores no me funcionó cuando uso DirectionsRenderer .

En mi caso, también tuve que llamar a setMap(null) a mi DirectionsRenderer .

Algo como eso:

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

Para eliminar todas las superposiciones incluyendo polis, marcadores, etc ...

simplemente use:

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);}

Aquí hay una función que escribí para hacerlo desde una aplicación de mapas:

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

Parece que no hay tal función en V3 todavía.

La gente sugiere mantener las referencias a todos los marcadores que tiene en el mapa en una matriz. Y luego, cuando desee eliminarlos todos, simplemente realice un bucle a través de la matriz y llame al método .setMap (nulo) en cada una de las referencias.

Vea esta pregunta para más información / código.

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

El código es la versión editada de este código lootogo.com/googlemapsapi3/markerPlugin.html Eliminé la necesidad de llamar a addMarker manualmente.

Pros

  • De esta manera, mantendrá el código compacto y en un solo lugar (no contamina el espacio de nombres).
  • Ya no tiene que seguir la pista de los marcadores, siempre puede encontrar todos los marcadores en el mapa llamando a map.getMarkers ()

Contras

  • Usar prototipos y envoltorios como lo hice ahora hace que mi código dependa del código de Google, si hacen un cambio mayor en su fuente, esto se romperá.
  • Si no lo entiendes, no podrás arreglarlo si se rompe. Hay pocas posibilidades de que cambien cualquier cosa que rompa esto, pero aún así ...
  • Si elimina un marcador manualmente, su referencia seguirá estando en la matriz de marcadores. (Podrías editar mi método setMap para arreglarlo, pero a costa de hacer un bucle a través de la matriz de marcadores y eliminar la referencia)

Puedes hacerlo de esta manera también:

function clearMarkers(category){ 
  var i;       

  for (i = 0; i < markers.length; i++) {                          
    markers[i].setVisible(false);        
  }    
}

Simplemente camine sobre los marcadores y elimínelos del mapa, después de eso, la matriz de marcadores de mapas vacíos

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

Simplemente haga lo siguiente:

I. Declarar una variable global:

var markersArray = [];

II. Definir una función:

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

O

google.maps.Map.prototype.clearOverlays = function() {
  for (var i = 0; i < markersArray.length; i++ ) {
    markersArray[i].setMap(null);
  }
  markersArray.length = 0;
}

III. Presione los marcadores en el 'markerArray' antes de llamar a lo siguiente:

markersArray.push(marker);
google.maps.event.addListener(marker,"click",function(){});

IV. Llame a los clearOverlays(); o map.clearOverlays(); funciona donde sea necesario.

¡¡Eso es!!


Usando esto puedes eliminar todos los marcadores del mapa.

map.clear();

Esto te ayudaría, me ayudaría ..


Yo uso una taquigrafía que hace bien el trabajo. Solo haz

    map.clear();


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

Solo esta trabajando en IE.

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

Trabajando en Chrome, Firefox, es decir ...







google-maps-api-3