时间戳

首页 > 解决方案 > 使用 ajax 调用过滤数据时更新标记

jquery - 使用 ajax 调用过滤数据时更新标记

问题描述

当过滤位置标记没有更新时，我遇到了问题，旧标记仍然存在，新标记不断添加到旧标记上。

我也使用过map.removeLayer()，但似乎没有任何效果如果我在成功调用后使用此功能，它将始终删除标记。

$('#filter').click(function(){
    $.ajax({
            type:'GET',
            url:"{{ url('filter-opportunities-grid') }}",
            data: {
                'status':status,
            },
            dataType:'json',
            success:function(res){
            var addressPoints = res[8];
             if (markers != null) {
                  map.removeLayer(markers);
             }

                //Color according to types
                var markers = L.markerClusterGroup();
                    for (var i = 0; i < addressPoints.length; i++) {
                        var a = addressPoints[i];
                        var title = a.title;
                        var due_date = a.due_date;
                        var type = a.type;
                        var address = a.url;

                       if(type==0) {
                                var marker = L.marker(new L.LatLng(a.lat,a.lng), {  title: title, icon:red});
                        }
                        if(type==1) {
                                var marker = L.marker(new L.LatLng(a.lat,a.lng), {  title: title, icon:orange});
                        }
                        if(type==2) {
                                var marker = L.marker(new L.LatLng(a.lat,a.lng), {  title: title, icon:yellow});
                        }
                        if(type==3) {
                                var marker = L.marker(new L.LatLng(a.lat,a.lng), {  title: title, icon:green});
                        }
                        if(type==4) {
                                var marker = L.marker(new L.LatLng(a.lat,a.lng), {  title: title, icon:blue});
                        }
                        marker.bindPopup('<a class="text-info" href='+address+'><i class="fa fa-external-link" aria-hidden="true"></i> </a>'+title+'<br>Date de fin:'+due_date);
                        markers.addLayer(marker);
                        map.addLayer(markers);
                    }                     
            }  
    })
}

标签： jqueryajaxleaflet

解决方案

您是否尝试过在函数之外定义标记？

var markers = L.markerClusterGroup();

标记是否在调用以下内容的范围内？

if (markers != null) {
  map.removeLayer(markers);
}

推荐阅读