如何在传单中使用传单室内插件和可拖动对象.1.0.3

Question

使用宣传单v0.7.7 时，宣传单张室内的效果非常好。 更新到传单v1.0.3 后，标记变为可拖动，但现在传单室内不起作用。

此外，传单本身就是一个错误：

  

TypeError：无法读取未定义的属性“call”

const MapController = function() {

  // Containers
  var $window = $(window),
  mapEl = document.getElementById('map-base'),
  mapFileName = window.mapFile,
  resourceSidebar = document.getElementById('resourceSidebar'),
  detailSidebar = document.getElementById('detailSidebar');

  // Links
  var addResource = document.querySelectorAll('[data-add-resource]');

  setHeight();

  // Create map perimeter
  //   console.log(window);
  var view = window.mapDefaultView.split(',');
  var map = new L.Map(mapEl, {
    center: new L.LatLng(parseFloat(view[0]),parseFloat(view[1])),
    zoom: parseFloat(window.mapDefaultZoom),
    zoomControl: true
  });

  makePerimeter()

  L.marker([parseFloat(view[0]),parseFloat(view[1])], {
    draggable: true,
    icon: L.divIcon({
      iconSize: null,
      html: "<div style='padding:1rem'>Hi</div>"
    })
  }).addTo(map);

  // Not draggable
  // Just here for visual reference
  // when dragging marker
  var circle = L.circle([parseFloat(view[0]),parseFloat(view[1])],100000).addTo(map);
  L.control.mousePosition().addTo(map);

  // Set heights on the main containers
  function setHeight() {
    var winHeight = $window.height()+'px';
    mapEl.style.height = winHeight;
    resourceSidebar.style.height = winHeight;
    detailSidebar.style.height = winHeight;
  }

  // Open the detail sidebar
  function toggleDetailSidebar() {
    var el = detailSidebar;
    if (el.classList.contains('active')) {
      el.classList.remove('active');
    } else {
      el.classList.add('active');
    }
  }

  // Create Perimeter, Guides, and Sections
  function makePerimeter() {
    $.get(window.mapDataFilePath, function(data) {

      var baseLayer = new L.Indoor(data, {
        getLevel: function(feature) {
          if (feature.properties.relations.length === 0)
          return null;

          return feature.properties.relations[0].reltags.level;
        },
        onEachFeature: function(feature, layer) {
          layer.bindPopup(JSON.stringify(feature.properties, null, 4));
        },
        style: function(feature) {
          var fill = '#fafafa',
          stroke = '#4d4d4d',
          part = feature.properties.tags.buildingpart;
          switch (part) {
            case 'guide':
            fill = '#eee';
            stroke = '#eee';
            break;
            case 'section':
            fill = 'transparent';
            stroke = 'transparent';
            break;
          }
          return {
            fillColor: fill,
            weight: 1,
            color: stroke,
            fillOpacity: 1
          };
        }
      });

      baseLayer.setLevel("0");

      baseLayer.addTo(map);

      var levelControl = new L.Control.Level({
        level: "0",
        levels: baseLayer.getLevels()
      });

      // Connect the level control to the indoor layer
      levelControl.addEventListener("levelchange", baseLayer.setLevel, baseLayer);

      levelControl.addTo(map);

      perimeterWasMade()
    });
  }

  function perimeterWasMade() {

    // Save map view/zoom in hash, so it presists on refresh
    var saveView = new L.Hash(map);

    // Some other plugins I was messing around with
    // Leave commented for now
    //L.control.polylineMeasure({imperial: true}).addTo(map);
    //L.control.mousePosition().addTo(map);

    // 6' booth example
    // This is the correct w/h of a 6'w booth that is 4'h
    // except it is rotated incorrectly.
    // It should be wider than it is tall.

    var bounds = [
      [  -0.0807  ,  12.8787  ],
      [  -0.0807  ,  13.2845  ],
      [   0.5284  ,  13.2845  ],
      [   0.5284  ,  12.8787  ]
    ];

    var booth = L.polygon(bounds, {color: 'red', weight: 1})
    booth.addTo(map);



    // Load booths
    loadObjects()

  }

  function loadObjects() {
    // load booths and prizes onto the map
    loadJSON("booths.json", function(response) {
      var actual_JSON = JSON.parse(response);
      $.each(actual_JSON,function(i,val){
        if (val.coordinate != undefined && val.size != null)
        {
          var size = val.size.split('x');
          var marker = L.marker([val.coordinate.x,val.coordinate.y], {
            id: val.id,
            draggable: true,
            icon: L.divIcon({
              iconSize: null,
              html: "<div style='height:"+size[0]+"; width="+size[1]+";'><div style=' padding:5px 10px;'>"+val.vendor.industry +" </div><span style='text-align:center;display:block;border-top:4px solid #888;'>"+val.vendor.name+"</span></div>"
            })
          }).addTo(map);
          // label.dragging.enable();
          marker.on('drag', function(event){
            console.log("position");
          });

          //also display booths using leaflet.label

          // var label = new L.Label();
          // label.setContent("<div style='height:"+size[0]+"; width="+size[1]+";'><div style=' padding:5px 10px;'>"+val.vendor.industry +" </div><span style='text-align:center;display:block;border-top:4px solid #888;'>"+val.vendor.name+"</span></div>");
          // label.setLatLng([val.coordinate.x,val.coordinate.y]);
          // map.showLabel(label);
        }
      })
    });
  }
  map.on('click', function(e) {
    //alert(e.latlng);
  });

  // Catch click on resource in sidebar
  if (addResource.length > 0) {
    addResource.each(function() {
      this.addEventListener('click', function(e) {
        e.preventDefault();
        mapEl.classList.add('adding-booth');
      });
    });
  }
}