Google Maps API v3: как убрать все маркеры? - PullRequest
418 голосов
/ 09 октября 2009

В Google Maps API v2, если бы я хотел удалить все маркеры карты, я мог бы просто сделать:

map.clearOverlays();

Как это сделать в Google Maps API v3 ?

Глядя на Reference API , мне неясно.

Ответы [ 31 ]

475 голосов
/ 13 марта 2010

Просто сделайте следующее:

I. Объявите глобальную переменную:

var markersArray = [];

II. Определить функцию:

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

OR

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

III. Нажмите маркеры в 'markerArray' перед вызовом следующего:

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

IV. Вызовите функцию clearOverlays(); или map.clearOverlays();, где это необходимо.

Вот и все !!

83 голосов
/ 15 декабря 2009

Та же проблема. Этот код больше не работает.

Я исправил, измените метод 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

46 голосов
/ 09 октября 2009

Кажется, что в 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, чтобы исправить это, но ценой зацикливания массива ринг-маркеров и удаления ссылки)
23 голосов
/ 20 мая 2015

Это было самое простое из всех решений, первоначально опубликованных YingYang Mar 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 голосов
/ 09 октября 2009
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 есть такой, поэтому я использовал вышеуказанную пользовательскую реализацию.

Отказ от ответственности: я не писал этот код, но забыл сохранить ссылку, когда слил ее в свою кодовую базу, поэтому я не знаю, откуда она взялась.

16 голосов
/ 17 ноября 2010

На новой версии 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 голосов
/ 11 января 2011

В демонстрационной галерее Google есть демонстрация того, как они это делают:

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

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

Короче говоря, они хранят маркеры в глобальном массиве. При очистке / удалении они перебирают массив и вызывают «.setMap (null)» для данного объекта маркера.

Однако в этом примере показан один «трюк». «Очистить» в этом примере означает удаление их с карты, но сохранение их в массиве, что позволяет приложению быстро добавить их на карту. В некотором смысле это действует как «сокрытие» их.

"Удалить" также очищает массив.

6 голосов
/ 06 апреля 2017

Решение довольно простое. Вы можете использовать метод: 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 в коде своим ключом Google API:

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

6 голосов
/ 03 декабря 2012
for (i in markersArray) {
  markersArray[i].setMap(null);
}

работает только в IE.


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

работает на Chrome, Firefox, т. Е.

5 голосов
/ 14 сентября 2015

Чистое и простое применение ответа Ролингера.

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) ;
    }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...