javascript - 我如何解决此 MarkerCluster checkin / checkout 错误(传单销售人员)？

Question

问题是，当我在叠加层上 checkout 并再次 checkin 后，我收到此错误:

Uncaught TypeError: Cannot read property 'x' of undefined throws at dist/leaflet.markercluster.js:1:25696 TypeError: Cannot read property 'x' of undefined at L.DistanceGrid._sqDist (DistanceGrid.js:114)
at L.DistanceGrid.getNearObject (DistanceGrid.js:94) at e._addLayer (MarkerClusterGroup.js:974) at eval (MarkerClusterGroup.js:249)
at e.addLayers (MarkerClusterGroup.js:283) at e.addLayers (layersupport.js:99) at e.onAdd (layersupport.js:517) at e._layerAdd (leaflet.js:5) at e.whenReady (leaflet.js:5) at e.addLayer (leaflet.js:5)

I saw that this function from DistanceGrid(is in leaflet library) which is called when i check in on the overlay 

_sqDist: function (p, p2) {
      var dx = p2.x - p.x,
          dy = p2.y - p.y;
      return dx * dx + dy * dy;
  }

当我 checkin 时，p 不知何故未定义。我已经为这个错误苦苦挣扎了很长时间。也许你有什么建议

标记是为组定义的，并且它们已正确显示问题仅与 checkin checkout 有关。一旦我检查出它们，集群就会消失，一旦我 checkin ，我就会收到之前提到的错误，而不是在 map 上显示集群

Controller 代码如下:

JS controller: 
var map = L.map('map', {zoomControl: true, tap: false, preferCanvas:true})
var group1,group2,group3,group4;
var myRenderer = L.canvas({ padding: 0.5 });
 var markers = L.markerClusterGroup.layerSupport( { 
        chunkedLoading: true,
        renderer: myRenderer,
        iconCreateFunction: function  (cluster) {
        var childCount = cluster.getChildCount();

        var c = ' marker-cluster-';
        if (childCount < 10) {
            c += 'small';
        } 
        else if (childCount < 100) {
            c += 'medium';
        } 
        else {
                c += 'large';
        }

        return new L.DivIcon({ html: '<div><span>' + childCount + '</span> 
</div>', 
                              className: 'marker-cluster' + c, iconSize: 
 new L.Point(40, 40) });
            }
});

 group1 = L.layerGroup(),
       group2 = L.layerGroup(),
      group3 = L.layerGroup(),
       group4 = L.layerGroup(),

    markers.checkIn([group1, group2, group3, group4]);

    var overlayMaps = {
        "g1": group1,
        "g2": group2,
        "g3":group3,
        "g4":group4
    };
    var control = L.control.layers(null, overlayMaps, { collapsed: true });


    control.addTo(map);

    group1.addTo(map); // Adding to map or to AutoMCG are now equivalent.
    group2.addTo(map);
    group3.addTo(map);
    group4.addTo(map);

 markers.addTo(map);

PS:我不知道如何提供一个可行的版本，因为这是一个销售人员应用程序

Answer 1

chunkedLoading 选项可能没有被 Leaflet.markercluster.layerSupport 插件很好地处理。

我不知道为什么你需要定期“结账”和“签到”？您是指使用图层控件删除/添加叠加层吗？

否则，如果您“仅”需要将 Leaflet.markercluster 与 Layers Control 一起使用的解决方案，您可以尝试使用更简单的插件 Leaflet.FeatureGroup.SubGroup ，虽然如果 chunkedLoading 是问题的原因，它也可能与该插件相同。