Google Maps API v3: Как удалить все маркеры?

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

map.clearOverlays();

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

Если посмотреть на Reference API, то мне это неясно.

Комментарии к вопросу (7)

Просто выполните следующие действия:

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

var markersArray = [];

Второй. Определим функцию:

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

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

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

ИЖ. Позвони в clearOverlays (); " или " карту.clearOverlays (); функция, где требуется.

Что's оно!!

Комментарии (11)

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

Я'вэ исправить его, изменить clearMarkers метод таким образом:

set_map(нуль) ---> 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

Комментарии (7)

Похоже, что в 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
Комментарии (5)

Это было самое простое из всех решений первоначально написал YingYang марта 11 '14 в 15:049 под оригинальный ответ на оригинальный вопрос пользователям

Я использую свое же решение 2,5 года спустя с помощью карт Google В3.18 и он работает как шарм

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

// No need to clear the array after that.
Комментарии (0)

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
Комментарии (5)

На новой версии 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;
  }
}
Комментарии (0)

Решение довольно простое. Вы можете использовать метод: маркер.setMap(карта);. Здесь вы можете определить, на какой карте PIN-код появится.

Так, если вы установите нуль в этом методе (маркер.setMap(нуль);), пин-код исчезнет.


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

Вы просто добавить, чтобы положить ваши контакты в массив и объявлять их с маркерами.нажимаем (пин your_new) или, например, это код:

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

Это мой полный код. Это самое простое, я мог бы сократить. Быть уход полный вы можете заменить YOUR_API_KEY в код вашего ключа Google API-интерфейс:




  Remove Markers

     /* Always set the map height explicitly to define the size of the div
     * element that contains the map. */
     #map {
       height: 100%;
       }




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


Вы можете проконсультироваться разработчиков Google или полной документации, кроме того, веб-сайте разработчиков Google.

Комментарии (0)

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

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

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

Длинная короткая история, они держат маркеры в глобальный массив. При очистке/удаление их, они цикл через массив и называют ".setMap(значение null)" на данный маркер объекта.

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

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

Комментарии (0)
for (i in markersArray) {
  markersArray[i].setMap(null);
}

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



for (var i=0; i
Комментарии (1)

Чистое и простое применение rolinger'ы ответ.

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) ;
    }
Комментарии (0)

Здесь вы можете найти пример как удалить маркеры:

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 = [];
}
Комментарии (0)

Функция "set_map", опубликованная в обоих ответах, похоже, больше не работает в API Google Maps v3.

Интересно, что произошло

Обновление:

Похоже, Google изменил свой API так, что "set_map" не является "setMap".

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

Комментарии (0)

Следующий С отлично Анон работает, хотя и с проблесками, когда неоднократно сняв накладки.

Просто выполните следующие действия:

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

var markersArray = [];

Второй. Определим функцию:

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

Раздел III. Нажимаем маркеры в 'markerArray' до вызова следующих функций:

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

ИЖ. Вызов функции clearOverlays() там, где это необходимо.

Что's оно!!

Надеемся, что вам помогут.

Комментарии (1)

Я нашел с помощью библиотеки markermanager в Google-Карты-утилиты-библиотека-В3 проект как самый простой способ.

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();
Комментарии (1)

Вы тоже можете это сделать таким образом:

function clearMarkers(category){ 
  var i;       

  for (i = 0; i < markers.length; i++) {                       
    markers[i].setVisible(false);        
  }    
}
Комментарии (0)

Самый чистый способ сделать это, чтобы перебрать все возможности карты. Маркеры (вместе с полигонов, полилиний и т. д.) хранятся в слой данных карты.

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.карты.методы класса данные позже.

Комментарии (1)

Чтобы очистить все слои, включая полигонов, маркеры и т. д...

просто использовать:

карта = новый Google.карты.Карта(документ.метода 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"));
}
Комментарии (1)

Я просто попытался это с kmlLayer.setMap(null) и это сработало. Не уверен, если это будет работать с обычными маркерами, но, кажется, работает правильно.

Комментарии (0)

Чтобы удалить все метки с карты создать функции что-то вроде этого:

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 = [];
      }
Комментарии (0)

Это метод Google сами используют по крайней мере один образец:

var markers = [];

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

Проверьте образец Google для полный пример кода:

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

Комментарии (0)