Как правило, идея состоит в том, чтобы отслеживать все маркеры в глобальной переменной - массив является лучшим выбором.Каждый раз, когда вызывается функция add, она должна либо добавлять маркер к этой глобальной переменной, либо возвращаемое значение (как здесь) должно использоваться для заполнения массива.
При попытке удалить определенный маркер этозатем легко перебрать массив, чтобы найти интересующий маркер.
function add(id, address, lat, lon) {
var id = $('#liste li').length + 1;
$('#liste').append('<li id="'+id+'"><h2>id</h2><p>'+ address+" "+lat+" "+lon+'</p></li>'); //adds on list
marker = new google.maps.Marker({ //adds marker on maps
position: new google.maps.LatLng(lat, lon),
animation: google.maps.Animation.DROP,
id: id, //to get the marker individually
icon: icons[destek].icon,
info: new google.maps.InfoWindow({
content: id +". " + adres
}),
map: map
});
google.maps.event.addListener(marker, 'click', function() {
marker.info.open(map, marker);
});
map.panTo(marker.getPosition());
/* either return the marker or add to array here... */
return marker;
}
let markers=[];
/* some calls to `add` - return value is added to the array */
markers.push( add( 'bob', 'an address, some town, somewhere', 34.1, 2.7 ) );
markers.push( add( 'rita', 'The Brown Bull Inn, England', 51.473658, -0.911651 ) );
markers.push( add( 'sue', 'Muddy Field, The Back Lane, Scotland', 56.617411, -2.921294 ) );
/* to remove a marker by id - not tested btw */
const removemarker=function( id ){
markers.forEach( function( mkr,index ){
if( mkr.id===id ){
mkr.setMap( null );
markers.splice(index,1)
}
})
}
Помимо использования === вместо == у меня не было проблем с этим.Я создал небольшую демонстрацию, которую вы можете попробовать с немного измененной функцией (используя == вместо ===)
Не беспокойтесь о данных или измененной функции add - важный битфактическое удаление маркера.Данные взяты из проекта, который я сделал несколько лет назад, и функция add является очень упрощенной версией вашего оригинала. Должно быть легко настроить работу с вашей функцией, как предлагалось ранее.
Скопируйте следующее,добавьте свой собственный ключ API и запустите, чтобы увидеть результаты
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>Remove Google Maps Marker</title>
<style>
#map{width:60%;height:60vh;margin:20vh auto;float:none;}
a{margin:0.25rem auto;float:none;padding:0.25rem;}
</style>
<script>
let map;
let markers=[];
let data={
"table": "maps",
"rows":
[
{
"id": 96,
"name": "Kinnettles 4 x 125m turbines",
"lat": "56.61543329027024",
"lng": "-2.9266123065796137"
},
{
"id": 97,
"name": "Nathro 17 x 135m turbines",
"lat": "56.793249595719956",
"lng": "-2.8623101711273193"
},
{
"id": 98,
"name": "Ark Hill - 8 x 81m turbines",
"lat": "56.57065514278748",
"lng": "-3.0511732892761074"
},
{
"id": 99,
"name": "Dodd Hill - 5 x 125m turbines",
"lat": "56.54251020079966",
"lng": "-2.9051538305053555"
},
{
"id": 100,
"name": "Govals - 6 x 87m turbines",
"lat": "56.582320876071854",
"lng": "-2.9509015874633633"
},
{
"id": 101,
"name": "Carsegownie - 1 x78m turbine",
"lat": "56.67951330362271",
"lng": "-2.8062983350524746"
},
{
"id": 102,
"name": "Frawney - Over Finlarg - 5x100m turbines",
"lat": "56.56806620951482",
"lng": "-2.9501720266113125"
},
{
"id": 103,
"name": "North Tarbrax - 1 x 45m turbine",
"lat": "56.57144715546598",
"lng": "-2.92476614282225"
},
{
"id": 104,
"name": "The Carrach - 9 x 84m turbines",
"lat": "56.6938437674986",
"lng": "-3.131382067657455"
},
{
"id": 105,
"name": "Glaxo - 2 x 132m turbines",
"lat": "56.70431711148748",
"lng": "-2.4660869436035"
}
]
};
function initMap(){
let location=new google.maps.LatLng( 56.617411, -2.921294 );
map = new google.maps.Map( document.getElementById('map'), {
center: location,
zoom: 8
});
const removemarker=function( id ){
markers.forEach( function( mkr,index ){
if( mkr.id==id ){
mkr.setMap( null );
markers.splice(index,1)
}
})
}
const add=function(id,address,lat,lng){
return new google.maps.Marker({
id:id,
title:address,
position: new google.maps.LatLng(lat,lng),
title:address,
map:map
});
}
data.rows.forEach( obj=>{
markers.push( add( obj.id, obj.name, obj.lat, obj.lng ) );
let a=document.createElement('a');
a.id=obj.id;
a.innerHTML='Delete ['+obj.name+']';
a.href='#';
a.onclick=function(e){
e.preventDefault();
removemarker( this.id );
this.parentNode.removeChild( this );
};
document.getElementById( 'links' ).appendChild( a )
})
}
</script>
<script async defer src="//maps.google.com/maps/api/js?key=xxxxxxxxxxxxxxxx3ukaTnzBdDextWai4&callback=initMap"></script>
</head>
<body>
<div id='map'></div>
<div id='links'></div>
</body>
</html>