Google Maps JavaScript API v3 удаляет маркеры

Question

Я рассмотрел большое количество «похожих» вопросов, и ни одно из решений/ответов не работает для меня, поэтому мы идем: я генерирую простую карту Google с помощью одного маркера «OnLoad» Я тогда список меню немного, как этот

<ul> 
<li class="toggle" id="beaches">Item</li> 
<li class="toggle" id="towns">Item</li> 
<ul> 

, что по щелчку использует эти массивы маркеру заполнять карту

JQuery -

$(".toggle").click(function(){ 
setMarkers(map,$(this).attr('id')); 
}); 

var beaches = [ 
['Beach 1',38.285827, 20.611038, 4], 
['Beach 2', 38.304958,20.604515, 5], 
['Beach 3',38.301691,20.597649, 3] 
]; 

var towns = [ 
['Town 1',38.343003, 20.535679, 4], 
['Town 2',38.339334,20.545807, 5] 
]; 

Моя населения весело фикция выглядит следующим образом:

function setMarkers(map, locations) { 
for (var i = 0; i < locations.length; i++) { 
var newmarker = locations[i]; 
var myLatLng = new google.maps.LatLng(newmarker[1], newmarker[2]); 
var marker = new google.maps.Marker({ 
position: myLatLng, 
map: map, 
title: newmarker[0], 
zIndex: newmarker[3] 
}); 
} 

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

Answer 1

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

Вы могли бы попробовать что-то вроде этого:

var setMarkers = (function() { 
    var oldMarkers = null; 
    return function(map, locations){ 
     //Clearing markers, if they exist 
     if(oldMarkers && oldMarkers.length !== 0){ 
      for(var i = 0; i < oldMarkers.length; ++i){ 
       oldMarkers[i].setMap(null); 
      } 
     } 
     //Adding new markers 
     oldMarkers = []; 
     for (var i = 0; i < locations.length; i++) { 
      var newmarker = locations[i]; 
      var myLatLng = new google.maps.LatLng(newmarker[1], newmarker[2]); 
      var marker = new google.maps.Marker({ 
       position: myLatLng, 
       map: map, 
       title: newmarker[0], 
       zIndex: newmarker[3] 
      }); 
      oldMarkers.push(marker); 
     } 
    }; 
})(); 

Answer 2

Вы можете определить глобальный массив маркеров и очистки тех, вызвав setMap(null), прежде чем вновь заселить карту:

var markers = []; 

function setMarkers(map, locations) { 
    for (var i = 0; i < locations.length; i++) { 
     var newmarker = locations[i]; 
     var myLatLng = new google.maps.LatLng(newmarker[1], newmarker[2]); 

     if (markers[i]) { 
      markers[i].setMap(null); 
     } 

     markers[i] = new google.maps.Marker({ 
      position: myLatLng, 
      map: map, 
      title: newmarker[0], 
      zIndex: newmarker[3] 
     }); 
    } 
} 

Answer 3

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

function clear(){ 
    if(locations){ 
     for(var i=0;i<location.length;i++){ 
      locations[i].setMap(null); 
     } 
     locations.length=0; 
    } 
} 

Answer 4

Yo и нужно, чтобы убедиться, что ваши маркеры сохраняются в массиве, а затем удалить сделать некоторые вещи, как

// Sets the map on all markers in the array. 
     function removeMarkers { 
     for (var i = 0; i < markers.length; i++) { 
      markers[i].setMap(null); 
     } 
     markers.length=0; 

     } 

Так что ваш код будет теперь

var markers []; 

function setMarkers(map, locations) { 
// remove all markers first 
removeMarkers(); 
for (var i = 0; i < locations.length; i++) { 
var newmarker = locations[i]; 

var myLatLng = new google.maps.LatLng(newmarker[1], newmarker[2]); 
var marker = new google.maps.Marker({ 
position: myLatLng, 
map: map, 
title: newmarker[0], 
zIndex: newmarker[3] 
}); 
//add to marker array 
markers.push(marker); 
}