Как удалить маркер конкретно на Google Maps

Я разрабатываю приложение javascript, которое содержит карту Google, список маркеров и две кнопки (добавить/удалить). я хочу добавить маркер на карту и в список, чтобы удалить оба при нажатии на список.

добавить можно, а удалить нельзя.

добавить кнопку запускает эту функцию.

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

кнопка удаления запускает эту функцию

function sil(id) {
$('#'+id).remove();
 var marker = marker({id:id}) //tried to get marker by id
marker.setMap(null);

 }

как я могу получить и удалить маркер конкретно? благодаря.

javascript google-maps google-maps-api-3 google-maps-markers

21.02.2019 08:16

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

554

Ответы 1

Обычно идея состоит в том, чтобы отслеживать все маркеры в глобальной переменной — лучший выбор — массив. Каждый раз, когда вызывается функция 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>

даже я использую оповещение внутри функции, сила (идентификатор); не работает

— 21.02.2019 10:56

21.02.2019 09:02