Google Maps API v3: Bagaimana cara menghapus semua penanda?

Di Google Maps API v2, jika saya ingin menghapus semua penanda peta, saya bisa melakukannya:

map.clearOverlays();

Bagaimana saya melakukan ini di Google Maps API v3 ?

Melihat API Referensi , tidak jelas bagi saya.

Cukup lakukan hal berikut:

I. Menyatakan variabel global:

var markersArray = [];

II Tentukan fungsi:

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

ATAU

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

AKU AKU AKU. Tekan penanda di 'markerArray' sebelum memanggil yang berikut:

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

IV. Panggil fungsi clearOverlays();atau di map.clearOverlays();mana pun diperlukan.

Itu dia!!

Permasalahan yang sama. Kode ini tidak berfungsi lagi.

Saya telah memperbaikinya, ubah metode clearMarkers dengan cara ini:

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

Dokumentasi telah diperbarui untuk memasukkan rincian tentang topik: https://developers.google.com/maps/documentation/javascript/markers#remove

Tampaknya belum ada fungsi seperti itu di V3.

Orang-orang menyarankan untuk menyimpan referensi ke semua penanda yang Anda miliki di peta dalam sebuah array. Dan kemudian ketika Anda ingin menghapus em semua, cukup loop melalui array dan panggil metode .setMap (null) pada masing-masing referensi.

Lihat pertanyaan ini untuk info lebih lanjut / kode.

Versi saya:

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

Kode ini adalah versi yang diedit dari kode ini http://www.lootogo.com/googlemapsapi3/markerPlugin.html Saya menghapus kebutuhan untuk memanggil addMarker secara manual.

Pro

• Melakukan hal ini Anda menjaga kode tetap kompak dan di satu tempat (tidak mencemari namespace).
• Anda tidak perlu melacak penanda sendiri lagi, Anda selalu dapat menemukan semua penanda di peta dengan memanggil map.getMarkers ()

Cons

• Menggunakan prototipe dan pembungkus seperti yang saya lakukan sekarang membuat kode saya tergantung pada kode Google, jika mereka membuat perubahan walikota dalam sumber mereka, ini akan rusak.
• Jika Anda tidak memahaminya maka Anda tidak akan dapat memperbaikinya jika rusak. Kemungkinannya rendah bahwa mereka akan mengubah apa pun yang akan merusak ini, tapi tetap saja ..
• Jika Anda menghapus satu marker secara manual, rujukannya masih dalam array marker. (Anda dapat mengedit metode setMap saya untuk memperbaikinya, tetapi dengan mengorbankan pengulangan array markers dan menghapus referensi)

Ini adalah yang paling sederhana dari semua solusi yang semula diposting oleh YingYang 11 Mar '14 pada 15: 049 di bawah tanggapan asli terhadap pertanyaan asli pengguna

Saya menggunakan solusi yang sama 2,5 tahun kemudian dengan google maps v3.18 dan itu berfungsi seperti pesona

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

Saya tidak berpikir ada satu di V3 jadi saya menggunakan implementasi kustom di atas.

Penafian: Saya tidak menulis kode ini tetapi saya lupa menyimpan referensi ketika saya menggabungkannya ke dalam basis kode saya jadi saya tidak tahu dari mana asalnya.

Pada versi baru v3, Mereka merekomendasikan untuk tetap menggunakan array. sebagai berikut.

Lihat sampel di overlay-ikhtisar .

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

Galeri Demo Google memiliki demo tentang cara mereka melakukannya:

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

Anda dapat melihat kode sumber untuk melihat bagaimana mereka menambahkan penanda.

Singkat cerita, mereka menyimpan penanda dalam array global. Saat membersihkan / menghapusnya, mereka mengulang array dan memanggil ".setMap (null)" pada objek marker yang diberikan.

Namun, contoh ini menunjukkan satu 'trik'. "Clear" untuk contoh ini berarti menghapusnya dari peta tetapi menyimpannya dalam array, yang memungkinkan aplikasi untuk dengan cepat menambahkannya kembali ke peta. Dalam arti tertentu, ini bertindak seperti "menyembunyikan" mereka.

"Hapus" juga menghapus array.

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

hanya bekerja pada IE.

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

bekerja pada chrome, firefox, yaitu ...

Solusinya cukup mudah. Anda dapat menggunakan metode: marker.setMap(map);. Di sini, Anda menentukan peta pin yang akan muncul.

Jadi, jika Anda mengatur nulldalam metode ini ( marker.setMap(null);), pin akan hilang.

Sekarang, Anda dapat menulis penyihir fungsi sambil menghilangkan semua penanda di peta Anda.

Anda cukup menambahkan untuk meletakkan pin Anda dalam array dan mendeklarasikannya dengan markers.push (your_new pin)atau kode ini misalnya:

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

Ini adalah penyihir fungsi yang dapat mengatur atau menghilangkan semua penanda array Anda di peta:

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

Untuk menghilangkan semua spidol Anda, Anda harus memanggil fungsi dengan null:

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

Dan, untuk menghapus dan menghilangkan, semua spidol Anda, Anda harus mengatur ulang susunan spidol Anda seperti ini:

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

Ini kode lengkap saya. Itu yang paling sederhana yang bisa saya kurangi. Hati-hati penuh Anda dapat mengganti YOUR_API_KEYkode dengan kunci Google API Anda:

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

Anda dapat berkonsultasi dengan google developer atau dokumentasi lengkap di, juga, situs web google developer .

Aplikasi jawaban rolinger yang bersih dan mudah.

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

Fungsi " set_map" yang diposting di kedua jawaban tampaknya tidak berfungsi lagi di Google Maps v3 API.

Saya bertanya-tanya apa yang terjadi

Memperbarui:

Tampaknya Google mengubah API mereka sedemikian rupa sehingga "set_map " bukan " setMap".

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

Di sini Anda dapat menemukan contoh cara menghapus spidol:

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

Berikut ini dari Anon bekerja dengan sempurna, meskipun dengan berkedip ketika berulang kali membersihkan overlay.

Cukup lakukan hal berikut:

I. Menyatakan variabel global:

var markersArray = [];

II Tentukan fungsi:

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

AKU AKU AKU. Tekan penanda di 'markerArray' sebelum memanggil yang berikut:

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

IV. Panggil clearOverlays()fungsi itu di mana pun dibutuhkan.

Itu dia!!

Semoga itu bisa membantu Anda.

Saya menemukan menggunakan markermanager library di proyek google-maps-utility-library-v3 sebagai cara termudah.

1. Atur MarkerManager

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

2. Tambahkan marker ke MarkerManager

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

3. Untuk penanda jelas Anda hanya perlu untuk memanggil MarkerManger ini clearMarkers()fungsi

mgr.clearMarkers();

Anda dapat melakukannya dengan cara ini juga:

function clearMarkers(category){ 
  var i;       

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

Saya baru saja mencoba ini dengan kmlLayer.setMap (null) dan berhasil. Tidak yakin apakah itu akan berfungsi dengan spidol biasa tetapi tampaknya berfungsi dengan benar.

Untuk menghapus semua overlay termasuk polys, spidol, dll ...

cukup gunakan:

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

Berikut adalah fungsi yang saya tulis untuk melakukannya dari aplikasi peta:

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

Untuk menghapus semua penanda dari peta, buat fungsi-fungsi seperti ini:

1.addMarker (lokasi): fungsi ini digunakan untuk menambahkan penanda di peta

2.clearMarkers (): fungsi ini menghapus semua penanda dari peta, bukan dari array

3.setMapOnAll (map): fungsi ini digunakan untuk menambahkan info marker dalam array

4.deleteMarkers (): fungsi ini Menghapus semua penanda dalam array dengan menghapus referensi kepada mereka.

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

Cara terbersih melakukan ini adalah beralih ke semua fitur peta. Marker (bersama dengan poligon, polyline, dll.) Disimpan dalam lapisan data peta.

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

Jika marker ditambahkan melalui manajer gambar , yang terbaik adalah membuat array global marker atau mendorong marker ke dalam lapisan data pada kreasi seperti:

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

Saya merekomendasikan pendekatan kedua karena memungkinkan Anda untuk menggunakan metode kelas google.maps.data lainnya nanti.

Ini adalah metode yang digunakan Google sendiri dalam setidaknya satu sampel:

var markers = [];

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

Periksa contoh Google untuk contoh kode lengkap:

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

Saya tidak tahu mengapa, tetapi, menetapkan setMap(null)ke spidol saya tidak berfungsi untuk saya ketika saya menggunakan DirectionsRenderer.

Dalam kasus saya, saya harus menelepon setMap(null)ke saya DirectionsRendererjuga.

Sesuatu seperti itu:

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

Cukup berjalan di atas spidol dan menghapusnya dari peta, kosongkan spidol peta setelah itu:

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

cukup bersihkan Googlemap

mGoogle_map.clear();

Saya sudah mencoba semua solusi yang diusulkan, tetapi tidak ada yang berhasil ketika semua spidol saya berada di bawah satu cluster. Akhirnya saya hanya mengatakan ini:

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

Dengan kata lain, jika Anda membungkus marker dalam sebuah cluster dan ingin menghapus semua marker, Anda memanggil:

clearMarkers();

Maksud Anda menghapus seperti menyembunyikannya atau menghapusnya?

jika bersembunyi:

function clearMarkers() {
            setAllMap(null);
        }

jika Anda ingin menghapusnya:

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

perhatikan bahwa saya menggunakan penanda array untuk melacak mereka dan mengatur ulang secara manual.

Anda perlu mengatur peta nol ke penanda itu.

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

Saya menemukan solusi sederhana (saya pikir):

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

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

Saya menggunakan tulisan cepat yang melakukan pekerjaan dengan baik. Kerjakan saja

    map.clear();

jika Anda menggunakan plugin gmap V3: $("#map").gmap("removeAllMarkers");

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

Saya tahu bahwa ini mungkin solusi yang sama, tetapi inilah yang saya lakukan

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

Bekerja setiap saat untuk saya.