传单地图：如何删除图层并将弹出窗口添加到地图？

Question

我正在尝试将addLayer （ 标记，圆圈和弹出窗口 ）添加到地图。

我能够成功添加标记和圆圈，但是我无法添加弹出窗口，也无法删除Layer，这会导致标记和圆圈相乘...

它基本上不会在添加新标记之前删除先前的标记和圆圈。

这是一个有效的字段：

https://jsfiddle.net/31ws6z37/3/

这是我的整个代码：

         function initializeMapAndLocator(){

                var map = L.map('map_2385853');




    googleStreets = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',{
    maxZoom: 20,
    subdomains:['mt0','mt1','mt2','mt3']
}).addTo(map);



           map.locate({setView: true, 
                       maxZoom: 16, 
                       watch:true, 
                       timeout: 60000
                      });

      function onLocationFound(e) {
        var radius = e.accuracy / 2;
        var marker = new L.Marker(e.latlng, {draggable:true});
        var circles = new L.circle(e.latlng, radius).bindPopup("You are within " + radius + " meters from this point").openPopup();;

        map.removeLayer(marker);
        map.removeLayer(circles);




        map.addLayer(marker);
        map.addLayer(circles);







      }

      map.on('locationfound', onLocationFound);



         }

initializeMapAndLocator();

有人可以让我知道如何删除图层以及如何将弹出窗口添加到我的地图吗？

任何帮助，将不胜感激。

编辑：

似乎没有任何作用，我正在拔头发。 我转过的每个角落和每次搜索都表明我需要使用removeLayer来删除标记，但对我而言并非如此，我不理解它！

这是我代码的另一个版本，在删除旧代码之前仍会添加标记。

var map = L.map('map_2385853');

    googleStreets = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',{
    maxZoom: 20,
    subdomains:['mt0','mt1','mt2','mt3']
}).addTo(map);



           map.locate({setView: true, 
                       maxZoom: 16, 
                       watch:true, 
                       timeout: 60000
                      });

      function onLocationFound(e) {
        var radius = e.accuracy / 2;
        var marker;
        var circles;


        marker = new L.Marker(e.latlng, {draggable:true});
        circles = new L.circle(e.latlng, radius);


        //var pop = new bindPopup("You are within " + radius + " meters from this point").openPopup();

        map.eachLayer(function (layer) {
        map.removeLayer(marker);
        map.removeLayer(circles);
       });


     map.addLayer(marker);
     map.addLayer(circles);

      }

      map.on('locationfound', onLocationFound);

我确定我做错了什么，但我只是不知道在哪里和如何做！

任何帮助都会很棒。

Answer 1

问题是您将错误的内容混在一起。 您将更容易学习创建传单地图的基础知识 。 在第一个代码段中，首先初始化标记，然后将其删除，然后将其添加到地图中。 那没有道理，也不合逻辑。 在onLocationFound()函数中询问标记和圆圈图层是否在地图上。 如果为true，则将其删除：

  var marker; 
  var circles;

  function onLocationFound(e) {
    var radius = e.accuracy / 2;

    if(map.hasLayer(circles) && map.hasLayer(marker)) {
        map.removeLayer(circles);
      map.removeLayer(marker);
    } 

            marker = new L.Marker(e.latlng, {draggable:true});
            circles = new L.circle(e.latlng, radius);
        circles.bindPopup("You are within " + radius + " meters from this point").openPopup();

            map.addLayer(marker);
    map.addLayer(circles);

} 

这是经过修改的FIDDLE 。 希望能帮助到你

格莱斯·曼努埃尔