API Google Maps v3: Як видалити всі маркери?


429

У API Google Maps v2, якщо я хотів би видалити всі маркери карти, я міг би просто зробити:

map.clearOverlays();

Як це зробити в Google Maps API v3 ?

Дивлячись на Reference API , мені незрозуміло.


3
Я знайшов якийсь код за посиланням нижче, але свята корова - це чимало коду для імітації попереднього 1 рядка коду у v2 API. lootogo.com/googlemapsapi3/markerPlugin.html
mp_

2
пам’ятайте, що карти 3.0 мають бути ДУЖЕ легкими для того, щоб мобільні пристрої могли використовувати його з якомога меншим відставанням ...
Петрогад

1
Пропоновані тут рішення, як видається, порушені станом на 29.07.2010. Я б хотів, щоб я мав замість цього робочу версію.
Джонатан Гансон

9
Відповідь з найбільшою оцінкою - неправильна. Перегляньте джерело на цьому прикладі, щоб побачити, як це зробити: google-developers.appspot.com/maps/documentation/javascript/…
Себ Ештон,

Відповіді:


487

Просто виконайте наступне:

I. Оголосити глобальну змінну:

var markersArray = [];

II. Визначте функцію:

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

АБО

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

ІІІ. Натисніть маркери в "markerArray", перш ніж викликати таке:

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

IV. Зателефонуйте на clearOverlays();або map.clearOverlays();функцію, де потрібно.

Це воно!!


32
for..in цикл із масивом? це не може бути хорошим напевно ..? ..see: stackoverflow.com/questions/500504 / ...
Zack

4
Ви також можете приховати маркери за допомогою marker.setVisible (false)
NBK

12
Маркери все ще зберігаються в масиві, хоча він зростатиме і збільшуватиметься. Запропонував би очищення масиву також після циклу
Ami

5
ви завжди можете встановити markersArrayпорожній масив замість того, щоб встановлювати його довжину, що мені здається дивним:markersArray = [];
hellatan

11
Я хотів би використовувати whileпідхід для обробки масиву: while(markersArray.length) { markersArray.pop().setMap(null); }. Після цього не потрібно очищати масив.
YingYang

84

Та ж проблема. Цей код більше не працює.

Я це виправив, змінивши метод clearMarkers таким чином:

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

Документацію оновлено, щоб включати деталі по темі: https://developers.google.com/maps/documentation/javascript/markers#remove


1
Я, нарешті, працював над тим, щоб перебрати колекцію маркерів, де я їх зберігав, і використовувати setMap (null)
Себастьян,

4
Але чи очищає це маркери від пам'яті? Я розумію, що у JavaScript є автоматичне збирання сміття, але як ми знаємо, що API Google не містить посилання на маркер, коли викликається setMap (null)? У своєму додатку я додаю і "видаляю" тонну маркерів, і мені б не подобалося, щоб усі ці "видалені" маркери висмоктували пам'ять.
Нік

@Nick: додайте "видалити цей.маркер [i];" після біта setMap (null).
DaveS

4
На це запитання зараз відповіли в документації. code.google.com/apis/maps/documentation/javascript/…
lashleigh

1
Хто навіть використовує new Array();?
Річардс

47

Здається, що такої функції у V3 поки немає.

Люди пропонують зберігати посилання на всі маркери, які ви маєте на карті, у масиві. І тоді, коли ви хочете видалити їх усіх, просто переведіть цикл через масив і зателефонуйте методу .setMap (null) у кожну з посилань.

Дивіться це питання для отримання додаткової інформації / коду.

Моя версія:

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

Код відредагований версією цього коду http://www.lootogo.com/googlemapsapi3/markerPlugin.html Я усунув необхідність викликати addMarker вручну.

Плюси

  • Таким чином ви зберігаєте код компактним і в одному місці (не забруднює простір імен).
  • Вам більше не потрібно буде відслідковувати маркери, ви завжди можете знайти всі маркери на карті, зателефонувавши на map.getMarkers ()

Мінуси

  • Використання прототипів та обгортки, як я зараз, робить свій код залежним від коду Google, якщо вони внесуть зміни до мера в їх джерело, це порушиться.
  • Якщо ви цього не розумієте, ви не зможете це виправити, якщо він зламається. Шанси низькі, що вони збираються змінити все, що порушить це, але все ж ..
  • Якщо ви видалите один маркер вручну, його посилання все одно буде знаходитися в масиві маркерів. (Ви можете відредагувати мій метод setMap, щоб його виправити, але ціною прокручування масиву маркерів та видалення посилання)

1
+1 Від мене. Але ваша відповідь буде краще, якби ви включили обгортку для автоматичного виклику addMarker!
Андрій

Я припускаю, що ви справді маєте на увазі відповідь Ендрюса. Чи покажете ви з кодом, що б ви робили і чому. Спасибі
mp_

Мені шкода за затримку, я стримувався від публікації коду, оскільки не мав можливості швидко перевірити його.
Майку Морі

Дякую Майку. Хоча я не розумію - як додати новий маркер у ваш приклад. Знову ще багато спасибі!
mp_

1
Я спробував використовувати setMap (null), але у мене був сценарій автоматичного оновлення, і кожен раз, коли я встановлював всі 50 або більше своїх маркерів на нульову карту, у мене все-таки кудись маркерів без кленових плив десь у DOM. Це призвело до збою сторінки, оскільки кожні 30 секунд додавали до DOM 50 нових маркерів, і це поширювалось нескінченно, оскільки сторінка залишалася відкритою 24/7 на відеостіні. Мені довелося скористатися головною відповіддю та очистити всі накладки на карту з DOM повністю, перш ніж створювати нові. Сподіваюся, що це комусь допоможе; мені знадобилося багато часу, щоб зрозуміти, чому моя сторінка виходить з ладу! :(
InterfaceGuy

23

Це було найпростішим з усіх рішень, опублікованих YingYang 11 березня '14 о 15: 049 під оригінальною відповіддю на оригінальне запитання користувачів.

Я використовую його те ж рішення через 2,5 роки з google maps v3.18, і це працює як шарм

markersArray.push(newMarker) ;
while(markersArray.length) { markersArray.pop().setMap(null); }

// No need to clear the array after that.

21
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, тому я використав вищевказану спеціальну реалізацію.

Відмова: Я не писав цей код, але забув зберегти посилання, коли я об'єднав його в свою кодову базу, щоб не знав, звідки він узявся.


+1 Від мене. Я б додав обгортку навколо google.maps.Marker конструктора (або методу setMap, оскільки я думаю, що конструктор називає його всередині), який викликає addMarker автоматично, але все одно приємна відповідь :).
Майку Морі

@Maiku Mari, чи покажеш ти з кодом, що б ти робив і чому. Дякую
mp_

Як це не рішення? Ви видаляєте маркери, використовуючи set_map (null) на конкретному маркері, який ви хочете очистити, якщо ви хочете очистити все, а потім прокрутити за допомогою цієї функції. Якщо ви хочете щось більше,
запитайте

Я вважаю, що це прийшло звідси lootogo.com/googlemapsapi3/markerPlugin.html
Maiku Mori

6
-1 Поганий стиль. Створено лише один масив маркерів, але один на карту після clearMarkers (причина різниці get / set з прототипами). Неприємні помилки з кількома об'єктами на карті.
Томаш

18

У новій версії v3 вони рекомендували зберігати масиви. як наступне.

Дивіться зразок на огляді накладання .

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

6

Демо-галерея Google має демонстрацію того, як це робити:

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

Ви можете переглянути вихідний код, щоб побачити, як вони додають маркери.

Якщо коротко розповісти, вони зберігають маркери в глобальному масиві. Очищаючи / видаляючи їх, вони проходять цикл через масив і викликають ".setMap (null)" на заданому об'єкті маркера.

Однак цей приклад показує одну «хитрість». "Очистити" для цього прикладу означає видалення їх з карти, але зберігання їх у масиві, що дозволяє програмі швидко повторно додавати їх до карти. У певному сенсі це діє як "приховування" їх.

"Видалити" також очищає масив.



6

Рішення досить легко. Ви можете використовувати метод: marker.setMap(map);. Тут ви визначаєте, на якій карті з’явиться шпилька.

Отже, якщо встановити nullцей метод ( marker.setMap(null);), штифт зникне.


Тепер ви можете записати функцію відьом, змушуючи зникати всі маркери на карті.

Ви просто додаєте, щоб помістити свої шпильки в масив і оголосити їх за допомогою markers.push (your_new pin)цього коду, наприклад:

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

Щоб зникнути всі ваші маркери, вам слід зателефонувати за допомогою функції null:

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

Це мій повний код. Це найпростіший, до якого я міг би звести. Будьте уважні, ви можете замінити YOUR_API_KEYкод своїм ключовим 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>

Ви можете ознайомитися з розробником google або повною документацією на веб-сайті розробника Google .


5

Чисте та просте застосування відповіді ролінгера.

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


4

Тут ви можете знайти приклад того, як видалити маркери:

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

3

Наступне від Anon працює чудово, хоча і з мерехтінням при багаторазовому очищенні накладок.

Просто виконайте наступне:

I. Оголосити глобальну змінну:

var markersArray = [];

II. Визначте функцію:

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

ІІІ. Натисніть маркери в "markerArray", перш ніж викликати таке:

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

IV. Викликайте clearOverlays()функцію, де потрібно.

Це воно!!

Сподіваюся, що тобі допоможе.


1
for(in in markersArray){}напевно, не робить того, чого ви очікуєте від цього. Якщо Arrayвін поширюється деінде в коді, він також повторюватиме ці властивості, а не лише індекси. Версія JavaScript, markersArray.forEach()яка не підтримується скрізь. Вам стане кращеfor(var i=0; i<markersArray.length; ++i){ markersArray.setMap(null); }
Kit Sunde

3

Я знайшов використання бібліотеки markermanager в проекті google-maps-utility-library-v3 як найпростіший спосіб.

1. Налаштуйте MarkerManager

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

2. Додайте маркери до MarkerManager

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

3. Для чітких маркерів потрібно просто зателефонувати в MarkerManger в clearMarkers()функції

mgr.clearMarkers();

Здається, чимало зайвого набору, щоб залучити цю бібліотеку для очищення маркерів. Все, що clearMarkersробити, це повторити над дзвінками маркерів marker.setMap(null)(я перевірив джерело). Було б менше роботи, склавши їх у масив і зробити це самостійно.
Kit Sunde

3

Ви також можете це зробити так:

function clearMarkers(category){ 
  var i;       

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

2

Я щойно спробував це з kmlLayer.setMap (null), і він спрацював. Не впевнений, чи буде це працювати з звичайними маркерами, але, здається, працює правильно.


2

Щоб очистити всі накладки, включаючи поліси, маркери тощо ...

просто використовуйте:

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

Ось функція, яку я написав, щоб це сформувало мене в додатку на карті:

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

Чи це також не скине карту? припустимо, чи користувач перетягнув карту в нову область?
Кічу

2

Щоб видалити всі маркери з карти, створіть такі функції:

1.addMarker (розташування): ця функція використовується для додавання маркера на карті

2.clearMarkers (): ця функція видаляє всі маркери з карти, а не з масиву

3.setMapOnAll (карта): ця функція використовується для додавання інформації про маркери до масиву

4.deleteMarkers (): ця функція Видаляє всі маркери з масиву, видаляючи посилання на них.

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

2

Найчистішим способом цього є перегляд усіх особливостей карти. Маркери (поряд з багатокутниками, полілініями та ін.) Зберігаються в шарі даних карти.

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

У випадку, якщо маркери додаються за допомогою менеджера малюнків , найкраще створити глобальний масив маркерів або просунути маркери в рівень даних при створенні так:

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

Я рекомендую другий підхід, оскільки він дозволяє використовувати інші методи класу google.maps.data пізніше.



0

Я не знаю чому, але встановлення setMap(null)моїх маркерів не працювало для мене під час використання DirectionsRenderer.

У моєму випадку я також повинен був зателефонувати setMap(null)до DirectionsRendererсебе.

Щось схоже:

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

0

Просто перейдіть по маркерам і видаліть їх з карти, порожній масив маркерів карт після цього:

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


0

Я спробував усі запропоновані рішення, але нічого не спрацювало для мене, поки всі мої маркери були під кластером. Врешті-решт я просто ставлю це:

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

Іншими словами, якщо ви загортаєте маркери в кластер і хочете видалити всі маркери, ви телефонуєте:

clearMarkers();

-1

Ви маєте на увазі видалити як приховати їх чи видалити?

якщо ховається:

function clearMarkers() {
            setAllMap(null);
        }

якщо ви хочете видалити їх:

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

зауважте, що я використовую маркери масиву, щоб відстежувати їх і скидати їх вручну.


-1

Потрібно встановити мапу на цьому маркері.

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

-1

Я знайшов просте рішення (я думаю):

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

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

-1

Я використовую стенограму, яка виконує цю роботу добре. Просто роби

    map.clear();


-3

Я знаю, що це може бути подібне рішення, але я це роблю

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

Працює кожен раз для мене.


2
$ ("# map_canvas"). html (""); насправді витріть всю картографічну подію чистою, а також покладаєтесь на jQuery, тому ваша відповідь є і дурною, і негідною.
Сем

Так, це правильно. Ініціалізуйте карту та маркери
kronus

Але він не хоче переініціалізіровать карту він хоче видалити існуючі маркери ....
Sam

Я просто пропоную спосіб, який я знайшов, щоб видалити існуючі маркери. Принаймні, дай йому постріл і скажи мені, спрацювало чи ні. Це працює для мене
kronus

2
Весь сенс хотіти видалити маркери карт - уникнути необхідності повторної ініціалізації карти, такі випадки як моя означали, що я використовував бібліотеку малюнків googles для малювання на карті, якщо я очищую її і реініціалізую всю карту всіх накладених нами накладок. зникнути єдиний спосіб зупинити це збереження всіх накладок і повторне додавання їх, що також багато непотрібної роботи. Повторно ініціалізуйте карту, не знімаючи маркери, а відтворюючи її з нуля, НЕ знімаючи маркери.
Сем
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.