În Google Maps API v2, dacă am vrut pentru a elimina toate markeri harta, am putea face pur și simplu:
map.clearOverlays();
Cum pot face acest lucru în Google Maps API v3?
Se uită la Referință API, l's neclare pentru mine.
Pur și simplu faceți următoarele:
I. Declara o variabilă globală:
var markersArray = [];
II. Defini o funcție:
function clearOverlays() {
for (var i = 0; i < markersArray.length; i++ ) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
SAU
google.maps.Map.prototype.clearOverlays = function() {
for (var i = 0; i < markersArray.length; i++ ) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
III. Împinge markeri în 'markerArray' înainte de a apela la următoarele:
markersArray.push(marker);
google.maps.event.addListener(marker,"click",function(){});
IV. Suna `clearOverlays (); " sau " harta.clearOverlays (); funcția oriunde este necesar.
Ca's de ea!!
Aceeasi problema. Acest cod nu't mai funcționează.
Am'am corectat-o, schimba clearMarkers metoda de acest fel:
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();
};
Documentația a fost actualizat pentru a include detalii referitoare la acest subiect: https://developers.google.com/maps/documentation/javascript/markers#remove
Se pare că nu există nici o astfel de funcție în V3 încă.
Oamenii sugerez să păstreze trimiteri la toate markeri ai pe hartă într-o matrice. Și atunci când doriți să ștergeți-le pe toate, doar bucla prin matrice și de apel .setMap(null) metoda pe fiecare dintre referințele.
A se vedea această întrebare pentru mai multe informatii/cod.
Versiunea mea:
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);
}
Codul este versiunea editată de acest cod http://www.lootogo.com/googlemapsapi3/markerPlugin.html am eliminat necesitatea de a apela addMarker manual.
Pro
Contra
Acest lucru a fost cel mai simplu dintre toate soluțiile publicat inițial de YingYang 11 Mar '14 la 15:049 în original răspuns la utilizatorii întrebarea inițială
Sunt folosind aceeași soluție 2,5 ani mai târziu, cu google maps v3.18 și funcționează ca un farmec
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 nu't cred că există în V3 așa că am folosit mai sus personalizate de implementare.
Disclaimer: nu am scris acest cod, dar am uitat să-și păstreze o referință atunci când am fuzionat în codebase deci eu nu't știu de unde a venit.
Pe noua versiune v3, Au recomandat să păstrați în matrice. ca urmare.
A se vedea mostra de la overlay-prezentare.
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;
}
}
Soluția este destul de ușor. Puteți utiliza metoda: marker.setMap(hartă);
. Aici, definiți de harta pe care pin-ul va apărea.
Deci, dacă setați null
în această metodă (marker.setMap(null);
), pin-ul va dispărea.
Acum, puteți scrie o funcție vrăjitoare în timp ce face să dispară toate markeri pe hartă.
Tu trebuie doar să adăugați pentru a pune ace într-o matrice și să le declare cu markeri.push (your_new pin) sau prezentul cod, de exemplu:
// 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);
}
Aceasta este o funcție de vrăjitoare poate seta sau dispar toate semnele de matrice în harta:
// Sets the map on all markers in the array.
function setMapOnAll(map) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
}
Să dispară toate markeri dvs., ar trebui să apel funcția cu null
:
// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
setMapOnAll(null);
}
Și, pentru a elimina și dispar, toate markeri dvs., ar trebui să resetați serie de markeri astfel:
// Deletes all markers in the array by removing references to them.
function deleteMarkers() {
clearMarkers();
markers = [];
}
Asta este codul complet. E cel mai simplu am putea reduce la. Să fie de îngrijire completă puteți înlocui `YOUR_API_KEY în codul de cheie 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>
Puteți consulta google developer sau documentația completă privind, de asemenea, google-ul web developer.
Google's Demo Galerie are un demo despre cum se face:
http://code.google.com/apis/maps/documentation/javascript/examples/overlay-remove.html
Puteți vizualiza codul sursă pentru a vedea cum se adaugă markeri.
Poveste lungă scurt, se păstrează markeri într-o matrice globală. Atunci când compensare/ștergerea ei, bucla prin matrice și sun ".setMap(null)" pe dat marker obiect.
Cu toate acestea, acest exemplu arată un 'truc'. "Clear" pentru acest exemplu, înseamnă a le scoate de pe harta, dar menținându-le în matrice, care vă permite să rapid re-a le adăuga la hartă. Într-un sens, aceasta actioneaza ca "ascunde" le.
"Ștergeți" respinga matrice la fel de bine.
Curat și ușor de aplicare a rolinger's a răspunde.
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) ;
}
Aici puteți găsi un exemplu de cum pentru a elimina markeri:
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 = [];
}
"set_map
" funcția postat în ambele răspunsuri pare să nu mai funcționeze în Google Maps API v3.
Mă întreb ce s-a întâmplat
Actualizare:
Se pare Google a schimbat API-ul lor, astfel încât "set_map
" nu "setMap
".
http://code.google.com/apis/maps/documentation/v3/reference.html
Următoarele din Anon functioneaza perfect, deși cu pâlpâie atunci când în mod repetat de compensare suprapuneri.
Pur și simplu faceți următoarele:
I. Declara o variabilă globală:
var markersArray = [];
II. Defini o funcție:
function clearOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
}
}
III. Împinge markeri în 'markerArray' înainte de a apela la următoarele:
markersArray.push(marker);
google.maps.event.addListener(marker,"click",function(){});
IV. Suna clearOverlays()
funcția oriunde este necesar.
Ca's de ea!!
Sper că vă va ajuta.
Am găsit cu ajutorul markermanager bibliotecă în google-maps-utilitare-biblioteca-v3 proiect ca cel mai simplu mod.
1. Înființat MarkerManager
mgr = new MarkerManager(map);
google.maps.event.addListener(mgr, 'loaded', function () {
loadMarkers();
});
2. Adaugă markeri la MarkerManager
function loadMarkers() {
var marker = new google.maps.Marker({
title: title,
position: latlng,
icon: icon
});
mgr.addMarker(marker);
mgr.refresh();
}
3. Pentru a șterge markeri ai nevoie doar pentru a apela MarkerManger's `clearMarkers () funcția
mgr.clearMarkers();
Cel mai curat mod de a face acest lucru este de a itera peste toate caracteristicile hartă. Markeri (împreună cu poligoane, polilinii, ect.) sunt stocate în strat de date de pe hartă.
function removeAllMarkers() {
map.data.forEach((feature) => {
feature.getGeometry().getType() === 'Point' ? map.data.remove(feature) : null
});
}
În cazul în care markerii sunt adăugate prin desen manager, l's cel mai bun pentru a crea o matrice globală de markeri sau împingând markeri în stratul de date cu privire la crearea astfel:
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);
}
});
Recomand cea de a doua abordare, deoarece vă permite să utilizați google.hărți.date de clasă metodele de mai târziu.
Pentru a șterge toate suprapuneri, inclusiv polys, markere, etc...
pur și simplu utilizați:
map = new google.hărți.Harta(document.getElementById("map_canvas"), myOptions);}
Aici este o funcție care am scris-o fac pentru mine pe o hartă de aplicare:
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"));
}
Pentru a elimina toate marcajele de pe hartă a crea funcții ceva de genul asta:
1.addMarker(locație): această funcție se folosește pentru a adăuga un marker pe harta
2.clearMarkers(): această funcție a elimina toate marcajele de pe hartă, nu din matrice
3.setMapOnAll(hartă): această funcție se utilizează pentru a adăuga markeri informații în matrice
4.deleteMarkers(): această funcție Șterge toate marcajele în matrice prin eliminarea referiri la ele.
// 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 = [];
}
Aceasta este metoda Google se utiliza în cel puțin o probă:
var markers = [];
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
Verifica Google eșantion pentru a finaliza exemplu de cod:
https://developers.google.com/maps/documentation/javascript/examples/places-searchbox