Google Maps API v3: Jak usunąć wszystkie markery?

W Google Maps API v2, gdybym chciał usunąć wszystkie znaczniki mapy, mógłbym po prostu:

map.clearOverlays();

Jak to zrobić w Google Maps API v3 ?

Patrząc na API referencyjne , nie jest dla mnie jasne.

Po prostu wykonaj następujące czynności:

I. Zadeklaruj zmienną globalną:

var markersArray = [];

II. Zdefiniuj funkcję:

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

LUB

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

III. Wciśnij markery w „markerArray” przed wywołaniem następującego:

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

IV. Wywołaj funkcję clearOverlays();lub map.clearOverlays();tam, gdzie jest to wymagane.

Otóż ​​to!!

Taki sam problem. Ten kod już nie działa.

Naprawiłem to, zmieniam metodę clearMarkers w ten sposób:

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

Dokumentacja została zaktualizowana o szczegółowe informacje na ten temat: https://developers.google.com/maps/documentation/javascript/markers#remove

Wygląda na to, że w V3 nie ma jeszcze takiej funkcji.

Ludzie sugerują, aby przechowywać w tablicy odniesienia do wszystkich znaczników, które masz na mapie. A jeśli chcesz usunąć je wszystkie, po prostu przejdź przez tablicę i wywołaj metodę .setMap (null) dla każdego z odniesień.

Zobacz to pytanie, aby uzyskać więcej informacji / kodu.

Moja wersja:

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

Kod jest edytowaną wersją tego kodu http://www.lootogo.com/googlemapsapi3/markerPlugin.html Usunąłem potrzebę ręcznego wywoływania addMarker.

Plusy

• W ten sposób kod jest kompaktowy i znajduje się w jednym miejscu (nie zanieczyszcza przestrzeni nazw).
• Nie musisz już samodzielnie śledzić znaczników, zawsze możesz znaleźć wszystkie znaczniki na mapie, wywołując map.getMarkers ()

Cons

• Używanie prototypów i opakowań tak jak ja teraz uzależnia mój kod od kodu Google, jeśli dokonają zmiany burmistrza w swoim źródle, to się zepsuje.
• Jeśli tego nie rozumiesz, nie będziesz w stanie tego naprawić, jeśli się zepsuje. Istnieje niewielkie prawdopodobieństwo, że zmienią wszystko, co to zepsuje, ale nadal…
• Jeśli usuniesz jeden marker ręcznie, odniesienie będzie nadal znajdować się w tablicy markerów. (Możesz edytować moją metodę setMap, aby to naprawić, ale kosztem zapętlenia tablicy markerów koryta i usunięcia odniesienia)

Było to najprostsze ze wszystkich rozwiązań pierwotnie opublikowanych przez YingYang 11 marca 14 o 15: 049 pod oryginalną odpowiedzią na oryginalne pytanie użytkowników

Korzystam z tego samego rozwiązania 2,5 roku później z Google Maps v3.18 i działa jak urok

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

Nie wydaje mi się, żeby taki był w V3, więc użyłem powyższej niestandardowej implementacji.

Oświadczenie: Nie napisałem tego kodu, ale zapomniałem zachować odniesienie, kiedy połączyłem go z bazą kodu, więc nie wiem, skąd się wziął.

W nowej wersji v3 zalecili trzymanie się tablic. jak następuje.

Zobacz próbkę w omówieniu nakładki .

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

Galeria demonstracyjna Google zawiera prezentację tego, jak to robią:

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

Możesz wyświetlić kod źródłowy, aby zobaczyć, jak dodają znaczniki.

Krótko mówiąc, utrzymują znaczniki w globalnej tablicy. Podczas ich usuwania / usuwania zapętlają tablicę i wywołują „.setMap (null)” na danym obiekcie znacznika.

Jednak ten przykład pokazuje jedną „sztuczkę”. „Wyczyść” w tym przykładzie oznacza usunięcie ich z mapy, ale utrzymanie ich w tablicy, co pozwala aplikacji na szybkie ponowne dodanie ich do mapy. W pewnym sensie działa to jak „ukrywanie” ich.

„Usuń” usuwa również tablicę.

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

działa tylko na IE.

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

działa na chrome, firefox, czyli ...

Rozwiązanie jest dość łatwe. Można użyć metody: marker.setMap(map);. Tutaj określasz, na której mapie pojawi się pinezka.

Tak więc, jeśli ustawisz nulltę metodę ( marker.setMap(null);), pin zniknie.

Teraz możesz napisać funkcję wiedźmy, jednocześnie usuwając wszystkie znaczniki na mapie.

Po prostu dodajesz, aby umieścić piny w tablicy i zadeklarować je za pomocą markers.push (your_new pin)lub za pomocą tego kodu, na przykład:

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

Jest to funkcja, która może ustawić lub zniknąć wszystkie znaczniki twojej tablicy na mapie:

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

Aby usunąć wszystkie znaczniki, należy wywołać tę funkcję za pomocą null:

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

Aby usunąć i zniknąć wszystkie znaczniki, należy zresetować tablicę znaczników w następujący sposób:

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

To jest mój kompletny kod. To najprostszy do jakiego mógłbym się zredukować. Bądź ostrożny , możesz wymienićYOUR_API_KEY w kodzie kluczowym interfejsem API 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>

Możesz skonsultować się z programistą Google lub pełną dokumentację na stronie internetowej dla programistów Google .

Czyste i łatwe zastosowanie odpowiedzi rolingera.

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

Funkcja „ set_map” opublikowana w obu odpowiedziach wydaje się już nie działać w interfejsie API Map Google v3.

zastanawiam się co się stało

Aktualizacja:

Wygląda na to, że Google zmieniło interfejs API w taki sposób, że „ set_map” nie jest „ setMap”.

http://code.google.com/apis/maps/documentation/v3/reference.html

Tutaj możesz znaleźć przykład usuwania markerów:

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 = [];
}

Poniższe z Anona działa idealnie, choć z migotaniem przy wielokrotnym usuwaniu nakładek.

Po prostu wykonaj następujące czynności:

I. Zadeklaruj zmienną globalną:

var markersArray = [];

II. Zdefiniuj funkcję:

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

III. Wciśnij markery w „markerArray” przed wywołaniem następującego:

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

IV. Wywołaj clearOverlays()funkcję, gdziekolwiek jest to wymagane.

Otóż ​​to!!

Mam nadzieję, że ci to pomoże.

Znalazłem użycie biblioteki markermanager w projekcie google-maps-utility-library-v3 jako najprostszy sposób.

1. Skonfiguruj MarkerManager

mgr = new MarkerManager(map);
google.maps.event.addListener(mgr, 'loaded', function () {
    loadMarkers();
});

2. Dodaj znaczniki do MarkerManager

function loadMarkers() {
  var marker = new google.maps.Marker({
            title: title,
            position: latlng,
            icon: icon
   });
   mgr.addMarker(marker);
   mgr.refresh();
 }

3. Aby usunąć znaczniki wystarczy zadzwonić pod MarkerManger jest clearMarkers()funkcja

mgr.clearMarkers();

Możesz to zrobić w ten sposób:

function clearMarkers(category){ 
  var i;       

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

Właśnie próbowałem tego z kmlLayer.setMap (null) i zadziałało. Nie jestem pewien, czy działałoby to ze zwykłymi markerami, ale wydaje się działać poprawnie.

Aby usunąć wszystkie nakładki, w tym polisy, markery itp.

po prostu użyj:

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

Oto funkcja, którą napisałem, aby to zrobić, tworzy mnie w aplikacji mapowej:

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

Aby usunąć wszystkie znaczniki z mapy, utwórz funkcje podobne do następujących:

1.addMarker (lokalizacja): ta funkcja służy do dodawania znacznika na mapie

2.clearMarkers (): ta funkcja usuwa wszystkie znaczniki z mapy, a nie z tablicy

3.setMapOnAll (mapa): ta funkcja służy do dodawania informacji o znacznikach do tablicy

4.deleteMarkers (): ta funkcja usuwa wszystkie znaczniki w tablicy, usuwając odniesienia do nich.

// 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 = [];
      }

Najczystszym sposobem na to jest iteracja wszystkich funkcji mapy. Znaczniki (wraz z wielokątami, poliliniami itp.) Są przechowywane w warstwie danych mapy.

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

W przypadku dodawania znaczników za pomocą menedżera rysunków najlepiej utworzyć globalną tablicę znaczników lub wepchnąć znaczniki do warstwy danych podczas tworzenia w następujący sposób:

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

Polecam drugie podejście, ponieważ pozwala ono później użyć innych metod klasy google.maps.data.

Jest to metoda, której Google używa w co najmniej jednej próbce:

var markers = [];

// Clear out the old markers.
markers.forEach(function(marker) {
  marker.setMap(null);
});
markers = [];

Sprawdź próbkę Google, aby zobaczyć pełny przykład kodu:

https://developers.google.com/maps/documentation/javascript/examples/places-searchbox

Nie wiem dlaczego, ale ustawienie setMap(null)moich znaczników nie działało dla mnie, gdy używam DirectionsRenderer.

W moim przypadku musiałem również zadzwonić setMap(null)do siebie DirectionsRenderer.

Coś w tym stylu:

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

Wystarczy przejść przez znaczniki i usunąć je z mapy, a następnie opróżnić tablicę znaczników map:

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

po prostu wyczyść Googlemap

mGoogle_map.clear();

Próbowałem wszystkich proponowanych rozwiązań, ale nic nie działało dla mnie, gdy wszystkie moje markery znajdowały się w grupie. W końcu po prostu umieszczam to:

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

Innymi słowy, jeśli zawijasz znaczniki w klastrze i chcesz usunąć wszystkie znaczniki, wywołujesz:

clearMarkers();

Masz na myśli usunięcie, jak je ukrywanie lub usuwanie?

jeśli ukrywasz:

function clearMarkers() {
            setAllMap(null);
        }

jeśli chcesz je usunąć:

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

zauważ, że używam znaczników tablic do śledzenia ich i resetowania ręcznego.

Musisz ustawić mapę zerową na tym znaczniku.

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

Znalazłem proste rozwiązanie (myślę):

var marker = new google.maps.Marker();

function Clear(){
     marker.setMap(null);
}

Używam stenografii, która dobrze sobie radzi. Po prostu zrób

    map.clear();

jeśli korzystasz z wtyczki gmap V3: $("#map").gmap("removeAllMarkers");

patrz: http://www.smashinglabs.pl/gmap/documentation#after-load

Wiem, że może to proste rozwiązanie, ale to właśnie robię

$("#map_canvas").html("");
markers = [];

Działa za każdym razem dla mnie.