Google Maps API v3: Tüm işaretçiler nasıl kaldırılır?

Google Maps API v2'de, tüm harita işaretleyicilerini kaldırmak istersem şunları yapabilirim:

map.clearOverlays();

Bunu Google Maps API v3'te nasıl yapabilirim ?

Referans API'sine baktığımda , bu benim için belirsiz.

Sadece aşağıdakileri yapın:

I. Global bir değişken belirtiniz:

var markersArray = [];

II. Bir fonksiyon tanımlayın:

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

VEYA

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

III. Aşağıdakileri çağırmadan önce 'markerArray' içindeki işaretçileri itin:

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

IV. İstediğiniz yerde clearOverlays();veya map.clearOverlays();işlevini çağırın .

Bu kadar!!

Aynı sorun. Bu kod artık çalışmıyor.

Düzelttim, clearMarkers yöntemini şu şekilde değiştirin:

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

Dokümanlar, konuyla ilgili ayrıntıları içerecek şekilde güncellendi: https://developers.google.com/maps/documentation/javascript/markers#remove

Görünüşe göre V3'te böyle bir fonksiyon yok.

Kullanıcılar, bir dizideki haritada sahip olduğunuz tüm işaretçilerin referanslarını tutmayı önerir. Ve sonra hepsini silmek istediğinizde, dizi boyunca döngü yapın ve referansların her birinde .setMap (null) yöntemini çağırın.

Daha fazla bilgi / kod için bu soruya bakın.

Benim versiyonum:

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, bu kodun düzenlenmiş hali http://www.lootogo.com/googlemapsapi3/markerPlugin.html AddMarker'ı manuel olarak arama ihtiyacını kaldırdım.

Artıları

• Bu şekilde kodu kompakt ve tek bir yerde tutarsınız (ad alanını kirletmez).
• Artık işaretçileri takip etmek zorunda değilsiniz map.getMarkers () öğesini çağırarak haritadaki tüm işaretçileri her zaman bulabilirsiniz.

Eksileri

• Benim yaptığım gibi prototipler ve sarıcılar kullanmak, kodumu Google koduna bağımlı hale getiriyor, eğer kaynaklarında bir belediye başkanı değişikliği yaparlarsa bu kırılacak.
• Eğer anlamadıysanız, kırılırsa düzeltemezsiniz. Bunu kıracak her şeyi değiştirecekleri düşük, ama yine de ..
• Bir işaretçiyi manuel olarak kaldırırsanız, referans hala işaretçi dizisinde olacaktır. (Düzeltmek için setMap yöntemimi düzenleyebilirsiniz, ancak oluk işaretçileri dizisini döngü ve başvuruyu kaldırma pahasına)

Bu, YingYang Mar 11 '14 tarafından 15: 049 tarihinde kullanıcılar tarafından orijinal sorunun orijinal yanıtı altında yayınlanan tüm çözümlerin en basitiydi

2,5 yıl sonra aynı çözümü google maps v3.18 ile kullanıyorum ve bir cazibe gibi çalışıyor

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

V3'te bir tane olduğunu düşünmüyorum, bu yüzden yukarıdaki özel uygulamayı kullandım.

Yasal Uyarı: Ben bu kodu yazmadı ama ben nereden geldiğini bilmiyorum böylece benim kod tabanı içine birleştirildiğinde bir referans tutmak unuttum.

Yeni sürüm v3'te, dizilerde kalmasını tavsiye ettiler. aşağıdaki gibi.

Bindirmeye genel bakıştaki örneğe bakın .

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

Google'ın Demo Galerisi'nin nasıl yaptıklarıyla ilgili bir demosu var:

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

İşaretçileri nasıl eklediklerini görmek için kaynak kodunu görüntüleyebilirsiniz.

Uzun lafın kısası, belirteçleri küresel bir dizide tutarlar. Bunları silerken / silerken, dizi boyunca döngü yaparlar ve verilen işaretleyici nesnesinde ".setMap (null)" çağırırlar.

Ancak, bu örnek bir 'numara' gösterir. Bu örnek için "Temizle", bunları haritadan kaldırmak, ancak dizide tutmak anlamına gelir; bu da uygulamanın bunları haritaya hızlı bir şekilde yeniden eklemesine olanak tanır. Bir bakıma, bu onları “gizlemek” gibi davranır.

"Sil" diziyi de temizler.

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

yalnızca IE üzerinde çalışıyor.

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

krom, firefox, yani ...

Çözüm oldukça kolaydır. Sen yöntemini kullanabilirsiniz: marker.setMap(map);. Burada, iğnenin hangi haritada görüneceğini tanımlarsınız.

Bu nedenle, nullbu yöntemi ( marker.setMap(null);) ayarlarsanız , pim kaybolur.

Artık haritanızdaki tüm işaretçileri yok ederken bir işlev cadı yazabilirsiniz.

Pinlerinizi bir diziye koymak ve markers.push (your_new pin)örneğin veya bu kodla bildirmek için ekleyin :

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

Bu, haritadaki dizinizin tüm işaretleyicilerini ayarlayabilen veya yok edebilen bir işlev cadıdır:

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

Tüm işaretçilerinizi ortadan kaldırmak için işlevi şu şekilde çağırmalısınız null:

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

Ve tüm işaretçilerinizi kaldırmak ve ortadan kaldırmak için, işaretçi dizinizi şu şekilde sıfırlamanız gerekir:

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

Bu benim tam kodum. Düşürebileceğim en basit şey bu. Kodda google API'nızla değiştirebileceğinize dikkatYOUR_API_KEY edin:

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

Google geliştiricisine veya ayrıca Google geliştirici web sitesindeki belgelerin tamamına başvurabilirsiniz .

Rolinger'ın cevabının temiz ve kolay bir uygulaması.

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

"set_map iki yanıta da gönderilen " işlevi artık Google Maps v3 API'sında çalışmıyor gibi görünüyor.

ne olduğunu merak ediyorum

Güncelleme:

Görünüşe göre Google API'larını " set_map" " " olmayacak şekilde değiştirdi setMap.

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

Burada işaretçileri nasıl kaldıracağınıza ilişkin bir örnek bulabilirsiniz:

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

Anon'dan aşağıdakiler mükemmel şekilde çalışır, ancak katmanları tekrar tekrar temizlerken titriyor.

Sadece aşağıdakileri yapın:

I. Global bir değişken belirtiniz:

var markersArray = [];

II. Bir fonksiyon tanımlayın:

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

III. Aşağıdakileri çağırmadan önce 'markerArray' içindeki işaretçileri itin:

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

IV. Gerektiğinde clearOverlays()işlevi çağırın .

Bu kadar!!

Umarım bu sana yardımcı olur.

En kolay yol olarak google-maps-utility-library-v3 projesinde markermanager kütüphanesini kullanarak buldum.

1. MarkerManager'ı kurun

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

2. MarkerManager'a işaretçiler ekleyin

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

3. İşaretçileri silmek için sadece MarkerManger clearMarkers()işlevini çağırmanız gerekir.

mgr.clearMarkers();

Siz de bu şekilde yapabilirsiniz:

function clearMarkers(category){ 
  var i;       

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

Ben sadece kmlLayer.setMap (null) ile denedim ve çalıştı. Bunun normal işaretçilerle çalışıp çalışmadığından emin değilsiniz, ancak düzgün çalışıyor gibi görünüyor.

Poliler, işaretleyiciler vb.Dahil olmak üzere tüm bindirmeleri temizlemek için ...

sadece kullanın:

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

İşte bunu bir harita uygulamasında form oluşturmak için yazdığım bir fonksiyon:

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

Tüm işaretçileri haritadan kaldırmak için aşağıdaki gibi işlevler oluşturun:

1.addMarker (konum): haritaya işaretçi eklemek için kullanılan bu işlev

2.clearMarkers (): bu işlev diziden değil tüm işaretçileri haritadan kaldırır

3.setMapOnAll (harita): diziye işaretçi bilgileri eklemek için kullanılan bu işlev

4..deleteMarkers (): bu işlev Dizideki tüm işaretçileri bunlara yapılan başvuruları silerek siler.

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

Bunu yapmanın en temiz yolu haritanın tüm özelliklerini tekrarlamaktır. İşaretçiler (çokgenler, çoklu çizgiler, vb. İle birlikte) haritanın veri katmanında saklanır .

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

İşaretçilerin çizim yöneticisi aracılığıyla eklenmesi durumunda, global bir işaretleyici dizisi oluşturmak veya işaretleyicileri oluşturma sırasında veri katmanına şu şekilde itmek en iyisidir:

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

Daha sonra diğer google.maps.data sınıfı yöntemlerini kullanmanıza izin verdiği için ikinci yaklaşımı öneririm.

Google'ın en az bir örnekte kullandığı yöntem budur:

var markers = [];

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

Kod örneğinin tamamı için Google örneğini kontrol edin:

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

Nedenini bilmiyorum, ama setMap(null)işaretçilerimi ayarlamak benim için işe yaramadı DirectionsRenderer.

Benim durumumda setMap(null)benim DirectionsRendererde aramam gerekiyordu .

Bunun gibi bir şey:

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

İşaretçiler üzerinde gezinin ve haritadan kaldırın, bundan sonra boş haritalar işaretçileri dizisi:

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

Google’ı temizle

mGoogle_map.clear();

Önerilen tüm çözümleri denedim, ancak tüm işaretçilerim bir kümenin altındayken benim için hiçbir şey işe yaramadı. Sonunda ben sadece koymak:

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

Başka bir deyişle, işaretleyicileri bir kümeye sararsanız ve tüm işaretçileri kaldırmak istiyorsanız, şunu çağırırsınız:

clearMarkers();

Onları gizlerken veya silerken kaldırmak mı istiyorsun?

saklanıyorsa:

function clearMarkers() {
            setAllMap(null);
        }

silmek isterseniz:

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

Bunları takip etmek ve manuel olarak sıfırlamak için bir dizi işaretçileri kullandığımı fark ettim.

Haritayı bu işaretleyiciye null olarak ayarlamanız gerekir.

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

Basit bir çözüm buldum (sanırım):

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

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

İşi iyi yapan bir stenografi kullanıyorum. Sadece yap

    map.clear();

gmap V3 eklentisini kullanıyorsanız: $("#map").gmap("removeAllMarkers");

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

Bunun basit bir çözüm olduğunu biliyorum, ama yaptığım bu

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

Benim için her zaman çalışır.