如何清除地图上的所有内容

时间:2016-04-03 16:00:52

标签: jquery leaflet

我正在通过ajax请求从我的数据库向我的地图添加标记。这是一个报告功能,所以我根据日期值查询我的数据库。然后,结果将标记添加到地图中,并在标记之间添加折线。

如何在运行函数之前清除所有标记和折线的整个地图?这是我的代码:

的jQuery

var map = L.map('map').setView([-49.7770641, 45.660275],7);
var markerArray = [];
var latlngArray = [];

$( document ).ready(function() { 
    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 20,
    }).addTo(map);
    getvehicles();
    var polyline = L.polyline(markerArray, {color: 'red'}).addTo(map);  
});

获取标记的功能:

function getlocationsreport(){

  var deviceid = $("#selectid").val();
  var start = $("#start").val();
  var end = $("#end").val();
        $.ajax({
            type: "POST",
            url: "functionhandlers/getlocations.php",
            data: {deviceid:deviceid,start:start,end:end},
            dataType: 'json',
            cache: false,
        })
        .success(function(response) {

            $('input').removeClass('error').next('.errormessage').html('');
            if(!response.errors && response.result) {                               
                $.each(response.result, function( index, value) {
                    var latlng = L.latLng(value[7], value[8]);
                    markerArray.push(L.circleMarker(latlng,{radius:2}));        
                    latlngArray.push(latlng);                   
               });
                 var group = L.featureGroup(markerArray).addTo(map);
                 var polyline = L.polyline(latlngArray, {color: 'red'}).addTo(map); 
                 map.fitBounds(group.getBounds());
            } else {
                $.each(response.errors, function( index, value) {
                    // add error classes
                    $('input[name*='+index+']').addClass('error').after('<div class="errormessage">'+value+'</div>')
                });
            }
        }); 
}

1 个答案:

答案 0 :(得分:0)

我会将该组保持在循环之外并使用clearLayers()方法清空该组。

// once for all
var group = L.layerGroup().addTo(map);

// in getlocationsreport
group.clearLayers();

// in marker loop
group.add(marker);

// then polyline
group.add(polyline);

http://leafletjs.com/reference.html#layergrouphttp://plnkr.co/edit/bYFzdmE5FcYe07HnVKLg?p=preview