Question

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

传单版本：leaflet@1.3.1

传单集群版本：markercluster@1.3.0

注意

$.fn.almDone...和$.fn.almEmpty...只是我用于我的Ajax回调

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

我们有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');
}

如果我们首先得到结果，然后我们进行另一次搜索，结果为零，则上述方法起作用，但是如果我们首先进行搜索并且得到zero results，那么我们将得到一个错误：

Uncaught ReferenceError: circles is not defined

那是正确的，因为自从进入empty function以来，我们一直尝试从未定义的clear the markers，因为我们从未进入定义circles的绘制标记功能。

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

p.s。不论问题如何，任何人都乐于改善逻辑

Answer 1

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

然后像在drawMarkers中一样进行设置。

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

如何在传单地图上添加和删除标记簇？

1 个答案: