javascript - 删除Leaflet实时标记

Question

我有一个跟踪实时数据的传单 map ，目前我让它每 x 秒正确更新一次位置，但旧标记不会被删除。我现在将删除所有标记并重新添加它们。我认为这也会影响页面的内存，因为值每次都会增加 166

我必须忽略一些非常愚蠢的事情。

我的 json 是这样的:

{"_items": [{"uniqueID": "a123", "isMoving": false, "bearing": 231, "longitude": -xx.xxxxx, "latitude": xx.xxxxx}]}

这是添加标记的代码

var marker = new Array();
for(i=0;i<myjson._items.length;i++){
    var LamMarker = new L.marker([myjson._items[i].latitude, myjson._items[i].longitude],{
       icon: autotop
    });
    console.log(myjson._items[i].latitude)
    marker.push(LamMarker);
    map.addLayer(marker[i]);
    }
}

我一直在尝试一些类似的事情

if (map.hasLayer(marker)) {
  for(i=0;i<marker.length;i++) {
map.removeLayer(marker[i])
   }
  }

在我的函数触发之前。

任何帮助都会很棒。

Answer 1

删除所有标记的一种极其简单的方法是使用中介 Layer Group :不要将标记直接添加到 map 中，而是将组添加到 map 中，并将标记添加到组中。然后删除其所有子标记及其 clearLayers()方法:

Removes all the layers from the group.

var map = L.map("map").setView([48.86, 2.35], 11);

var layerGroup = L.layerGroup().addTo(map);

function refreshMarkers() {
  layerGroup.clearLayers();
  for (var i = 0; i < 10; i += 1) {
    L.marker(getRandomLatLng()).addTo(layerGroup);
  }
}

setInterval(refreshMarkers, 2000);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

function getRandomLatLng() {
  return [
    48.8 + 0.1 * Math.random(),
    2.25 + 0.2 * Math.random()
  ];
}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>

<div id="map" style="height: 180px"></div>