Question

我正在开发一个包含Google地图，标记列表和两个按钮（添加/删除）的JavaScript应用。我想在地图和列表上添加标记，在单击列表时都将其删除。

可以添加但不能删除。

添加按钮运行该功能。

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

 }

我该如何具体地获取和删除标记？谢谢。

Answer 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>

如何具体删除Google地图上的标记

1 个答案: