Na API do Google Maps v2, se eu quisesse remover todos os marcadores de mapa, poderia simplesmente fazer:
map.clearOverlays();
Como faço isso na API do Google Maps v3 ?
Olhando para a API de referência , não está claro para mim.
Na API do Google Maps v2, se eu quisesse remover todos os marcadores de mapa, poderia simplesmente fazer:
map.clearOverlays();
Como faço isso na API do Google Maps v3 ?
Olhando para a API de referência , não está claro para mim.
Respostas:
Simplesmente faça o seguinte:
I. Declare uma variável global:
var markersArray = [];
II Defina uma função:
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 Empurre marcadores no 'markerArray' antes de chamar o seguinte:
markersArray.push(marker);
google.maps.event.addListener(marker,"click",function(){});
IV Ligue para a função clearOverlays();
ou map.clearOverlays();
sempre que necessário.
É isso aí!!
markersArray
para uma matriz vazia em vez de definir o seu comprimento, o que eu acho meio estranho:markersArray = [];
while
abordagem para o processamento da matriz: while(markersArray.length) { markersArray.pop().setMap(null); }
. Não há necessidade de limpar a matriz depois disso.
Mesmo problema. Este código não funciona mais.
Eu o corrigi, altere o método clearMarkers da seguinte maneira:
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();
};
A documentação foi atualizada para incluir detalhes sobre o tópico: https://developers.google.com/maps/documentation/javascript/markers#remove
new Array();
?
Parece que ainda não existe essa função na V3.
As pessoas sugerem manter referências a todos os marcadores que você possui no mapa em uma matriz. E então, quando você quiser excluir todos eles, faça um loop na matriz e chame o método .setMap (null) em cada uma das referências.
Veja esta pergunta para mais informações / código.
Minha versão:
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);
}
O código está na versão editada deste código http://www.lootogo.com/googlemapsapi3/markerPlugin.html Removai a necessidade de chamar o addMarker manualmente.
Prós
Contras
Esta foi a mais simples de todas as soluções postadas originalmente por YingYang 11 / mar '14 às 15: 049, na resposta original à pergunta original do usuário
Estou usando a mesma solução 2,5 anos depois com o google maps v3.18 e funciona como um encanto
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();
};
Eu não acho que exista um na V3, então usei a implementação personalizada acima.
Isenção de responsabilidade: não escrevi esse código, mas esqueci de manter uma referência quando a mesclei à minha base de código, para não saber de onde veio.
Na nova versão v3, eles recomendaram manter as matrizes. como segue.
Veja o exemplo na visão geral da sobreposição .
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;
}
}
A Galeria de demonstração do Google tem uma demonstração de como eles fazem isso:
http://code.google.com/apis/maps/documentation/javascript/examples/overlay-remove.html
Você pode ver o código fonte para ver como eles adicionam marcadores.
Para encurtar a história, eles mantêm os marcadores em uma matriz global. Ao limpá-los / excluí-los, eles fazem um loop na matriz e chamam ".setMap (null)" no objeto marcador especificado.
No entanto, este exemplo mostra um 'truque'. "Limpar" neste exemplo significa removê-los do mapa, mas mantê-los na matriz, o que permite que o aplicativo os adicione novamente rapidamente ao mapa. Em certo sentido, isso age como "escondê-los".
"Excluir" limpa a matriz também.
for (i in markersArray) {
markersArray[i].setMap(null);
}
está trabalhando apenas no IE.
for (var i=0; i<markersArray.length; i++) {
markersArray[i].setMap(null);
}
trabalhando no chrome, firefox, ou seja ...
A solução é bastante fácil. Você pode usar o método: marker.setMap(map);
. Aqui, você define em qual mapa o pino aparecerá.
Portanto, se você definir null
este método ( marker.setMap(null);
), o alfinete desaparecerá.
Agora, você pode escrever uma função enquanto faz desaparecer todos os marcadores no seu mapa.
Você acabou de adicionar para colocar seus pinos em uma matriz e declará-los com markers.push (your_new pin)
ou com este código, por exemplo:
// 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 é uma função que pode definir ou desaparecer todos os marcadores da sua matriz no 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 os seus marcadores, você deve chamar a função com null
:
// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
setMapOnAll(null);
}
E, para remover e desaparecer, todos os seus marcadores, você deve redefinir sua matriz de marcadores assim:
// Deletes all markers in the array by removing references to them.
function deleteMarkers() {
clearMarkers();
markers = [];
}
Este é o meu código completo. É o mais simples que eu poderia reduzir.
Cuidado, você pode substituir YOUR_API_KEY
o código pela sua API principal do 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>
Você pode consultar o desenvolvedor do Google ou a documentação completa, também, no site do desenvolvedor do Google .
Uma aplicação limpa e fácil da resposta 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) ;
}
A set_map
função " " postada nas duas respostas parece não funcionar mais na API do Google Maps v3.
Eu me pergunto o que aconteceu
Atualizar:
Parece que o Google alterou sua API de modo que " set_map
" não seja " setMap
".
http://code.google.com/apis/maps/documentation/v3/reference.html
Aqui você pode encontrar um exemplo de como remover marcadores:
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 = [];
}
O seguinte da Anon funciona perfeitamente, embora com cintilação ao limpar repetidamente as sobreposições.
Simplesmente faça o seguinte:
I. Declare uma variável global:
var markersArray = [];
II Defina uma função:
function clearOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
}
}
III Empurre marcadores no 'markerArray' antes de chamar o seguinte:
markersArray.push(marker);
google.maps.event.addListener(marker,"click",function(){});
IV Chame a clearOverlays()
função sempre que necessário.
É isso aí!!
Espero que ajude você.
for(in in markersArray){}
provavelmente não faz o que você espera. Se Array
for estendido para qualquer outro lugar do código, ele também repetirá essas propriedades, e não apenas os índices. A versão javascript disso markersArray.forEach()
não é suportada em todos os lugares. Você seria melhor comfor(var i=0; i<markersArray.length; ++i){ markersArray.setMap(null); }
Eu achei o uso da biblioteca markermanager no projeto google-maps-utility-library-v3 como a maneira mais fácil.
1. Configure o MarkerManager
mgr = new MarkerManager(map);
google.maps.event.addListener(mgr, 'loaded', function () {
loadMarkers();
});
2. Adicione marcadores ao MarkerManager
function loadMarkers() {
var marker = new google.maps.Marker({
title: title,
position: latlng,
icon: icon
});
mgr.addMarker(marker);
mgr.refresh();
}
3. Para apagar marcadores, basta chamar a clearMarkers()
função MarkerManger
mgr.clearMarkers();
clearMarkers
faz é iterar sobre os marcadores que chamam marker.setMap(null)
(verifiquei a fonte). Seria menos trabalho colocá-los em uma matriz e fazê-lo você mesmo.
Para limpar todas as sobreposições, incluindo polys, marcadores, etc ...
basta usar:
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);}
Aqui está uma função que eu escrevi para fazer isso em um aplicativo de mapa:
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"));
}
Para remover todos os marcadores do mapa, crie funções como esta:
1.addMarker (localização): esta função é usada para adicionar marcador no mapa
2.clearMarkers (): esta função remove todos os marcadores do mapa, não da matriz
3.setMapOnAll (map): esta função usada para adicionar informações de marcadores na matriz
4.deleteMarkers (): esta função Exclui todos os marcadores da matriz removendo referências a eles.
// 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 = [];
}
A maneira mais limpa de fazer isso é repetir todos os recursos do mapa. Marcadores (junto com polígonos, polilinhas, etc.) são armazenados na camada de dados do mapa.
function removeAllMarkers() {
map.data.forEach((feature) => {
feature.getGeometry().getType() === 'Point' ? map.data.remove(feature) : null
});
}
No caso de os marcadores serem adicionados via gerenciador de desenhos , é melhor criar uma matriz global de marcadores ou empurrá-los para a camada de dados na criação, da seguinte maneira:
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);
}
});
Eu recomendo a segunda abordagem, pois ela permite que você use outros métodos de classe google.maps.data posteriormente.
Este é o método que o próprio Google usa em pelo menos uma amostra:
var markers = [];
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
Verifique a amostra do Google para obter um exemplo de código completo:
https://developers.google.com/maps/documentation/javascript/examples/places-searchbox
Não sei por que, mas definir setMap(null)
meus marcadores não funcionou para mim quando estou usando DirectionsRenderer
.
No meu caso, eu tive que ligar setMap(null)
para o meu DirectionsRenderer
também.
Algo parecido:
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);
}
});
basta limpar o Googlemap
mGoogle_map.clear();
Eu tentei todas as soluções propostas, mas nada funcionou para mim enquanto todos os meus marcadores estavam em um cluster. Acabei de colocar isso:
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();
Em outras palavras, se você agrupar marcadores em um cluster e quiser remover todos os marcadores, chame:
clearMarkers();
Você precisa definir o mapa nulo para esse 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);
}
Eu uso uma taquigrafia que faz o trabalho bem. Apenas faça
map.clear();
se você usar o plug-in gmap V3:
$("#map").gmap("removeAllMarkers");
consulte: http://www.smashinglabs.pl/gmap/documentation#after-load
Eu sei que isso talvez seja uma solução simples, mas é isso que eu faço
$("#map_canvas").html("");
markers = [];
Funciona todas as vezes para mim.