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

Question

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

map.clearOverlays(); 

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

Рассматривая Reference API, это неясно.

Answer 1

Кажется, что в V3 такой функции нет.

Люди предлагают сохранить ссылки на все маркеры, которые у вас есть на карте в массиве. И затем, когда вы хотите удалить все все, просто зациклируйте массив и вызовите метод .setMap (null) для каждой из ссылок.

See this question for more info/code.

Моя версия:

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

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

Cons

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

Answer 2

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, так что я использовал выше обычай реализация.

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

Answer 3

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

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

Обновление:

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

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

Answer 4

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

Я исправил, метод изменения clearMarkers таким образом:

set_map (нуль) ---> setMap (нуль)

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

Answer 5

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

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

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

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

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

Вот и все!

Answer 6

В новой версии v3 они рекомендовали хранить в массивах. как указано ниже.

См. Образец на overlay-overview.

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

Answer 7

Следующее из 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(), где это необходимо.

Вот и все!

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

Answer 8

Я нашел использование библиотеки 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. Для удаления маркеров нужно просто вызвать clearMarkers() функцию MarkerManger в

mgr.clearMarkers(); 

Answer 9

компании Google Demo Галерея имеет демо о том, как они это делают:

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

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

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

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

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

Answer 10

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

Answer 11

если вы используете GMap V3 плагин: $("#map").gmap("removeAllMarkers");

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

Answer 12

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

function clearMarkers(category){ 
    var i;  

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

Answer 13

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

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

---

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

работает над Chrome, Firefox, то есть ...

Answer 14

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

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

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

Answer 15

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

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

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

Answer 16

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

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

Answer 17

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

Answer 18

Это был самый простой из всех решений, первоначально вывешенные 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. 

Answer 19

Вы MEA n удалять, как в их скрытии или удалении?

если скрытие:

function clearMarkers() { 
      setAllMap(null); 
     } 

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

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

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

Answer 20

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

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

Answer 21

Это метод 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

Answer 22

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

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

Answer 23

просто ясно Googlemap

mGoogle_map.clear(); 

Answer 24

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

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

---

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

Вы просто должны положить булавки в массив и объявить их 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); 
    } 
    } 

исчезнуть все маркеры, вы должны вызвать функцию с нулем:

// 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 developer или полную документацию здесь, также, google developer web site.

Answer 25

Вам необходимо установить значение 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); 
    } 

Answer 26

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

map.clear(); 

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

Answer 27

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

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

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

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

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

Answer 28

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

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

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

Answer 29

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

map.clear(); 

Answer 30

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

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