如何在 Angular-CLI 中使用 JQVmap？

Question

我制作了一个运行良好的 Angular-CLI 项目。但我需要用 jQvmap (here) 绘制交互式地图。在我的 angular-cli.json 文件中，我包含 jqvmap.js 和 jqvmap.css 的路径：

{
  "project": {
    "version": "1.0.0-beta.25.5",
    "name": "db-client"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "app",
      "mobile": false,
      "styles": [
        "styles.css",
        "style/bootstrap-3.3.6/css/bootstrap.css",
        "js/jqvmap/jqvmap.css",
        "style/style.css"
      ],
      "scripts": [
        "js/jquery/jquery-3.1.1.min.js",
        "js/jqvmap/jqvmap.js",
        "js/reductio/reductio.js",
        "js/d3/d3.js",
        "js/crossfilter/crossfilter.js",
        "js/dc/dc.js",
        "js/d3-tip/index.js"
      ],
      "environments": {
        "source": "environments/environment.ts",
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "addons": [],
  "packages": [],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "prefixInterfaces": false,
    "inline": {
      "style": false,
      "template": false
    },
    "spec": {
      "class": false,
      "component": true,
      "directive": true,
      "module": false,
      "pipe": true,
      "service": true
    }
  }
}

这是我使用 jQvmap 的组件：

import { Component } from '@angular/core';
import { MapChartService } from "./mapChart.service";
import { NgModule } from '@angular/core';

@Component({
  selector: 'map-chart',
  templateUrl: './mapChart.component.html',
  styleUrls: ['./mapChart.component.scss']
})
export class MapChartComponent {
  title = 'Module 3 : mapChart';

  constructor(private mapchartservice: MapChartService) {
    this.mapchartservice.startUp()
      .then(function (data) {
        console.log("--->", data);
      });
  }

  ngOnInit() {
    //On récupère la taille visible de l'écran en fonction du navigateur
    //On set la width et height
    //On rend l'écran non scrollable
    if (navigator.appName == 'Netscape' || navigator.appName == 'Firefox') {
      var totalWidth = window.innerWidth
      var totalHeight = window.innerHeight - 140
    }
    else {
      var totalWidth = document.body.clientWidth
      var totalHeight = document.body.clientHeight - 140
    }

    //widht and height
    var widthFirst = totalWidth * (5 / 12)
    var width = totalWidth / 2
    var height = totalHeight / 2
    var width2 = totalWidth / 3
    var height2 = (totalHeight - height) / 2

    //Set size de la map avant import du svg
    document.getElementById('map').setAttribute("style", "width: " + height + "px; height: " + height + "px");

    //Convertisseur x,y des points de la map
    var x = function (coord) {
      return coord * height / 400
    }

    //Création de la map en svg
    $('#map').vectorMap({
      map: 'fr_regions_mill',
      backgroundColor: 'transparent;',
      regionStyle: {
        initial: {
          fill: '#E2E2E2'
        },
        hover: {
          cursor: 'default',
          "fill-opacity": 1
        }
      },
      zoomButtons: false,
      zoomOnScroll: false
    });
  }
}

当我使用 npm start 命令启动我的项目时，我遇到了这个问题：

ERROR in /***/client/src/app/mapChart/mapChart.component.ts (49,15): Property 'vectorMap' does not exist on
type 'JQuery'.)

请问，我如何将 jQvmap 与 angular-cli 一起使用？

Answer 1

由于 Sabbir 的评论，此问题已解决：

Probably typings issue. Try declare let $: any; At the top of your component file after the imports. Sabbir Rahman

如何在 Angular-CLI 中使用 JQVmap？

How to use use JQVmap with Angular-CLI?

jqvmap

angular-cli

angular