javascript - 传单 map : how to removeLayer and add popups to the map?

Question

我正在尝试向 map addLayer(标记、圆圈和弹出窗口)。

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

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

这是一个有效的 FIDDLE:

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

有人可以告诉我如何删除图层以及如何将弹出窗口添加到我的 map 吗？

如有任何帮助，我们将不胜感激。

编辑:

似乎没有任何效果，我正在拔头发。我转弯的每个 Angular 落和每次搜索都表明我需要使用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

问题是你把错误的东西混合在一起了。您学习basics会更容易创建传单 map 。在第一个片段中，您首先初始化标记，然后将其删除，然后将其添加到 map 中。这没有任何意义，也不符合逻辑。在 onLocationFound() 函数中询问标记和圆圈图层是否在 map 上。如果为真则删除它:

  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 。希望对您有帮助

格里兹·曼努埃尔