Question

在将mapsvg jQuery库添加到Angular（4）项目中并添加了弹出窗口功能以进行映射之后，我收到控制台错误，并且弹出窗口功能不起作用。

我在Angular项目中添加了对所有js文件的引用。

错误：

core.js:1673 ERROR TypeError: this.contentWrap.nanoScroller is not a function
    at MapSVG.PopoverController.MapSVG.Controller.updateScroll (mapsvg.js:296)
    at MapSVG.PopoverController.MapSVG.Controller.redraw (mapsvg.js:377)
    at MapSVG.PopoverController.MapSVG.Controller.render (mapsvg.js:354)
    at MapSVG.PopoverController.MapSVG.Controller._init (mapsvg.js:305)
    at MapSVG.PopoverController.MapSVG.Controller (mapsvg.js:285)
    at new MapSVG.PopoverController (mapsvg.js:859)
    at Object.showPopover (mapsvg.js:4624)
    at Object.regionClickHandler (mapsvg.js:4389)
    at SVGEllipseElement.<anonymous> (mapsvg.js:4830)
    at HTMLDivElement.dispatch (jquery.js:5183)

可能我错过了一些东西，但是我无法调试它。

app.component.ts-> onInit（）：

$('#mapsvg').mapSvg({
  source: '/src/assets/mapsvg/maps/user-uploads/3rdFloor_Area_3.svg',
  tooltips: {mode: "id",on: false,priority: "local",position: "top"},
  popovers: {
    mode:
        function (jQueryPopoverObj, mapObject, mapsvgInstance
        ) {
                //return '<label id="' + this.id + '" style=" font-weight: bold;font-size: 0.8rem;">Desk ID: ' + this.id + '</label><p style=" font-weight: bold;font-size: 0.8rem;">This desk is booked and checked in</p><button type="button" class="btn-sm btn-primary mt-1" onclick="ClosePopup(\'' + this.id + '\')">Close</button>';
                //this.id;
                return '<b>' + this.id + '</b>' + this.title
            }
        }
        ,on: true, priority: "local", position: "top", centerOn: false, width: 200, maxWidth: 50

});

angular.json

      "node_modules/jquery/dist/jquery.js",
      "src/assets/mapsvg/js/mapsvg.js",
      "src/assets/mapsvg/js/admin.js",
      "src/assets/mapsvg/js/bootstrap-colorpicker.min.js",
      "src/assets/mapsvg/js/bootstrap.min.js",
      "src/assets/mapsvg/js/build.js",
      "src/assets/mapsvg/js/codemirror.colorize.js",
      "src/assets/mapsvg/js/codemirror.javascript.js",
      "src/assets/mapsvg/js/codemirror.js",
      "src/assets/mapsvg/js/css.js",
      "src/assets/mapsvg/js/formatting.js",
      "src/assets/mapsvg/js/handlebars.js",
      "src/assets/mapsvg/js/htmlmixed.js",
      "src/assets/mapsvg/js/ion.rangeSlider.min.js",
      "src/assets/mapsvg/js/jquery.message.js",
      "src/assets/mapsvg/js/jquery.message.min.js",
      "src/assets/mapsvg/js/jquery.mousewheel.min.js",
      "src/assets/mapsvg/js/jquery.nanoscroller.min.js",
      "src/assets/mapsvg/js/mapsvg.min.js",
      "src/assets/mapsvg/js/runmode.js",
      "src/assets/mapsvg/js/select2.min.js",
      "src/assets/mapsvg/js/settings.js",
      "src/assets/mapsvg/js/typeahead.bundle.min.js",
      "src/assets/mapsvg/js/xml.js"

将库添加到Angular项目中后，nanoScroller错误

0 个答案: