У API Google Maps v2, якщо я хотів би видалити всі маркери карти, я міг би просто зробити:
map.clearOverlays();
Як це зробити в Google Maps API v3 ?
Дивлячись на Reference API , мені незрозуміло.
У API Google Maps v2, якщо я хотів би видалити всі маркери карти, я міг би просто зробити:
map.clearOverlays();
Як це зробити в Google Maps API v3 ?
Дивлячись на Reference API , мені незрозуміло.
Відповіді:
Просто виконайте наступне:
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();
функцію, де потрібно.
Це воно!!
markersArray
порожній масив замість того, щоб встановлювати його довжину, що мені здається дивним:markersArray = [];
while
підхід для обробки масиву: while(markersArray.length) { markersArray.pop().setMap(null); }
. Після цього не потрібно очищати масив.
Та ж проблема. Цей код більше не працює.
Я це виправив, змінивши метод 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
new Array();
?
Здається, що такої функції у 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 вручну.
Плюси
Мінуси
Це було найпростішим з усіх рішень, опублікованих 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.
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, тому я використав вищевказану спеціальну реалізацію.
Відмова: Я не писав цей код, але забув зберегти посилання, коли я об'єднав його в свою кодову базу, щоб не знав, звідки він узявся.
У новій версії 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;
}
}
Демо-галерея Google має демонстрацію того, як це робити:
http://code.google.com/apis/maps/documentation/javascript/examples/overlay-remove.html
Ви можете переглянути вихідний код, щоб побачити, як вони додають маркери.
Якщо коротко розповісти, вони зберігають маркери в глобальному масиві. Очищаючи / видаляючи їх, вони проходять цикл через масив і викликають ".setMap (null)" на заданому об'єкті маркера.
Однак цей приклад показує одну «хитрість». "Очистити" для цього прикладу означає видалення їх з карти, але зберігання їх у масиві, що дозволяє програмі швидко повторно додавати їх до карти. У певному сенсі це діє як "приховування" їх.
"Видалити" також очищає масив.
for (i in markersArray) {
markersArray[i].setMap(null);
}
працює лише над IE.
for (var i=0; i<markersArray.length; i++) {
markersArray[i].setMap(null);
}
працює над хромом, firefox, тобто ...
Рішення досить легко. Ви можете використовувати метод: 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 .
Чисте та просте застосування відповіді ролінгера.
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) ;
}
Функція, яка " set_map
" розміщена в обох відповідях, здається, більше не працює в API Карт Google v3.
Цікаво, що сталося
Оновлення:
Здається, Google змінив їх API таким чином, що " set_map
" не є " setMap
".
http://code.google.com/apis/maps/documentation/v3/reference.html
Тут ви можете знайти приклад того, як видалити маркери:
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 = [];
}
Наступне від 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()
функцію, де потрібно.
Це воно!!
Сподіваюся, що тобі допоможе.
for(in in markersArray){}
напевно, не робить того, чого ви очікуєте від цього. Якщо Array
він поширюється деінде в коді, він також повторюватиме ці властивості, а не лише індекси. Версія JavaScript, markersArray.forEach()
яка не підтримується скрізь. Вам стане кращеfor(var i=0; i<markersArray.length; ++i){ markersArray.setMap(null); }
Я знайшов використання бібліотеки 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)
(я перевірив джерело). Було б менше роботи, склавши їх у масив і зробити це самостійно.
Щоб очистити всі накладки, включаючи поліси, маркери тощо ...
просто використовуйте:
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"));
}
Щоб видалити всі маркери з карти, створіть такі функції:
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 = [];
}
Найчистішим способом цього є перегляд усіх особливостей карти. Маркери (поряд з багатокутниками, полілініями та ін.) Зберігаються в шарі даних карти.
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 пізніше.
Це метод, який самі використовують 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
Я не знаю чому, але встановлення 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);
}
});
просто очистіть Googlemap
mGoogle_map.clear();
Я спробував усі запропоновані рішення, але нічого не спрацювало для мене, поки всі мої маркери були під кластером. Врешті-решт я просто ставлю це:
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();
Ви маєте на увазі видалити як приховати їх чи видалити?
якщо ховається:
function clearMarkers() {
setAllMap(null);
}
якщо ви хочете видалити їх:
function deleteMarkers() {
clearMarkers();
markers = [];
}
зауважте, що я використовую маркери масиву, щоб відстежувати їх і скидати їх вручну.
Потрібно встановити мапу на цьому маркері.
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);
}
Я використовую стенограму, яка виконує цю роботу добре. Просто роби
map.clear();
якщо ви використовуєте плагін gmap V3:
$("#map").gmap("removeAllMarkers");
дивіться: http://www.smashinglabs.pl/gmap/documentation#after-load
Я знаю, що це може бути подібне рішення, але я це роблю
$("#map_canvas").html("");
markers = [];
Працює кожен раз для мене.