javascript - 如何在传单 map 上添加和删除标记簇？

Question

我正在使用 leaflet market cluster我将标记设置为圆形标记。

Leaflet version: leaflet@1.3.1

Leaflet cluster version: markercluster@1.3.0

注意

$.fn.almDone... and $.fn.almEmpty... are just some functions I use for my ajax callbacks

如果我们有结果，我将在 map 上绘制一些标记，如果在第二次回调中我们的结果为零，则清除我们绘制的标记。或者简单地告诉用户我们的结果为零，因此标记为零。

我们有 2 个数组，其中的值是我获取坐标的位置:

var longitude = [];
var latitude = [];
var count = [];

我们在开始时将 var 设置为 stopAjax true:

var stopAjax = true;

点击我们开始搜索，我们将 stopAjax 设置为 false

$(".alm-filters--button").on("click", function(){
  stopAjax = false;
});

这就是基本逻辑，现在我们定义两个函数:

// This is run when we finish the call and we have results
// So on the callback we run the function to draw the markers

$.fn.almDone = function(alm){
  drawMarkers();
};

// Let's draw the markers

function drawMarkers() {

  // This is the logic to read latitude and longitude arrays
  // and push to a new array the two values as pair of coords
  // eg. 4.66, 4,5555 

  var i;
  for (i = 0; i < longitude.length; ++i) {
    pair=[ parseFloat( latitude[i] ) , parseFloat(  longitude[i]  ) ]
    count.push(  pair );
    $("#searchNations").removeAttr("disabled");
    $(this).attr("disabled", "disabled");
    var myYears = $('#years').val();
    $("#ajax-load-more ul").attr("data-meta-value", myYears);
  };

  // We check if we said to run ajax
  // and if so draw the markers
  // for myself I had also to retrieve those coords
  // and place them in individual inputs for the form

  if(stopAjax == false) {
    L.MarkerCluster.include({
      spiderfy: function(e) {
        var childMarkers = this.getAllChildMarkers();
        this._group._unspiderfy();
        this._group._spiderfied = this;

        // Fill the markersList.

        markersList.innerHTML = childMarkers
        .map((marker, index) => `<li>Marker ${index + 1}: ${marker.getLatLng()}</li>`)
        .join('');

        // If there are any childMarkers
        // draw the cluster and run a form

        if(childMarkers.length > 0) {
          // Match the lat and lng numbers from the string returned by getLatLng()
          const [lat, lng] = `${ childMarkers[0].getLatLng() }`.match(/(-?\d+.\d*)/gi);  

          // Construct the required string value from the extracted numbers
          const requiredString = `${ lat }, ${ lng }`;

          // Use requiredString to populate the value attribute of the input field in OP

          // grab the coords in individual inputs
          // that's just for my specific case

          $("#longiTude").attr("value",lat);
          $("#latiTude").attr("value", lng); 

          // run a form to see results

          submitSearchForm();
        }
      },
      unspiderfy: function() {
        this._group._spiderfied = null;
      }
    });

    // this bit is for single marker
    // we want to add a click to run the form 
    // also for the single marker and grab the coords 
    // and place them in inputs for the form

    var mcg = L.markerClusterGroup().addTo(map);

    circles = new L.MarkerClusterGroup();
    for (var i = 0; i < count.length; i++) {
      var a = count[i];
      var circle = new L.CircleMarker([a[0], a[1]]);
      circles.addLayer(circle);
      circle.on('click', function (e) {
        var curPos = e.target.getLatLng();
        $("#longiTude").val(curPos.lat);
        $("#latiTude").val(curPos.lng);
        submitSearchForm();
      });
    }

    // we add the markers to the map
    map.addLayer(circles);

    // we empty the arrays for the future calls

    count = [];
    longitude = [];

    // we set again stopAjax var to true to reset
    stopAjax = true;   
  }
}

然后是零结果函数

//This is run when we have zero results

$.fn.almEmpty = function(alm) {
 stopAjax = true;
  clearMarkers();
};

// We empty the arrays and we
// clear the previously drawn markers

function clearMarkers(stopAjax) {
  if(stopAjax == true) {
    count = [];
    longitude = [];
    map.removeLayer(circles);
  }
  // if zero results, we launch a modal to advise user
  $('#zeroResults').modal('show');
}

如果我们首先有结果，然后我们进行另一次搜索并且结果为零，则上述方法有效，但如果我们首先进行搜索并且我们得到零结果，那么我们将有一个错误:

Uncaught ReferenceError: circles is not defined

这是正确的，因为我们进入了empty function，我们试图clear the markers，我们从来没有定义过，因为我们从来没有进入draw markers function我们定义 circles 的地方。

我对如何绘制标记并使 var circles 在这两种情况下都可用感到非常困惑。

p.s. Happy for anyone to improve the logic regardless of the question issue

Answer 1

我会考虑通过 var circles = undefined; 将 circles 作为两个函数范围之外的变量。请注意，问题不在于 circles 是 undefined，而是它未定义，即未被识别为变量。

然后像在drawMarkers 中那样设置它。

在调用 removeLayer 之前在 clearMarkers 上检查 if (circles) 以检查它是否已定义。然后在调用 removeLayer 后再次将其设置为 undefined。