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

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

map.clearOverlays();

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

Глядя на Справочный API, это неясно мне.

ОТВЕТЫ

Ответ 1

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

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

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

III. Нажимайте маркеры в "markerArray", прежде чем вызывать следующее:

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

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

Что это!

Ответ 2

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

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

Ответ 3

Кажется, что в 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 вручную.

Pros

  • Таким образом, вы держите код компактным и в одном месте (не загрязняет пространство имен).
  • Вам больше не нужно отслеживать маркеры, вы всегда можете найти все маркеры на карте, вызывая map.getMarkers()

Cons

  • Использование прототипов и оберток, как я сделал, теперь делает мой код зависимым от кода Google, если они делают изменение мэра в их источнике, это сломается.
  • Если вы не понимаете этого, вы не сможете его исправить, если он сломается. Шансы низкие, что они собираются изменить что-нибудь, что сломает это, но все же..
  • Если вы удалите один маркер вручную, ссылка будет по-прежнему находиться в массиве маркеров. (Вы можете отредактировать мой метод setMap, чтобы исправить его, но ценой зацикливания массива маркеров и удаления ссылки)

Ответ 4

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

Я использую его же решение через 2,5 года с картами google v3.18 и работает как шарм

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

// No need to clear the array after that.

Ответ 5

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

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

Ответ 6

В новой версии 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;
  }
}

Ответ 7

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

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

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

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

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

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

Ответ 8

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

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

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

работает на chrome, firefox, т.е....

Ответ 9

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

Итак, если вы установите значение null в этом методе (marker.setMap(null);), контакт исчезнет.

Теперь вы можете написать функцию witch, в то время как удалить все маркеры на вашей карте.

Вы просто добавляете свои булавки в массив и объявляете их с помощью 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.

Ответ 10

Чистое и простое применение ответа 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) ;
    }

Ответ 11

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

Интересно, что случилось.

Update:

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

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

Ответ 12

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

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

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

var markersArray = [];

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

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

III. Нажмите маркеры в "markerArray", прежде чем вызывать следующее:

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

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

Что это!

Надеюсь, что это поможет.

Ответ 13

Я нашел использование библиотеки 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();

Ответ 14

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

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

Ответ 15

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

Ответ 16

Вы также можете сделать это:

function clearMarkers(category){ 
  var i;       

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

Ответ 17

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

просто используйте:

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

Ответ 18

Чтобы удалить все маркеры с карты, создайте функции примерно так:

1.addMarker(location): эта функция используется для добавления маркера на карту

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

3.setMapOnAll(map): эта функция используется для добавления информации о маркерах в массив

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

Ответ 19

Это метод, который сам 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

Ответ 20

Я использую стенографию, которая хорошо выполняет эту работу. Просто делать

    map.clear();

Ответ 21

Я не знаю, почему, но установка 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);
    }
});

Ответ 22

Просто пройдите по маркерам и удалите их из карты, пустые массивы маркеров карт после этого:

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

Ответ 23

просто очистить Googlemap

mGoogle_map.clear();

Ответ 24

Я пробовал все предлагаемые решения, но ничего не работало для меня, пока все мои маркеры находились под кластером. В конце концов я просто сказал:

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

Ответ 25

Вы имеете в виду удаление, как в их скрытии или удалении?

если скрывается:

function clearMarkers() {
            setAllMap(null);
        }

если вы хотите удалить их:

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

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

Ответ 26

Вам нужно установить значение null для этого маркера.

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

Ответ 28

Я знаю, что это может быть одно решение, но это то, что я делаю

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

Работает каждый раз для меня.

Ответ 29

С помощью этого вы можете удалить все маркеры с карты.

map.clear();

Это поможет вам, это поможет мне.

Ответ 30

Я нашел простое решение (я думаю):

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

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