如何在Angular-CLI中使用JQVmap？

我做了一個很好的Angular-CLI項目。但我需要用jQvmap繪製交互式地圖（here）。在我的角度，cli.json文件包括我jqvmap.js和jqvmap.css的路徑：如何在Angular-CLI中使用JQVmap？

{ 
    "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與角CLI？

來源

2017-02-07 MartinAbadie

可能是打字問題。嘗試'聲明let $：any;'在導入之後的組件文件頂部。 –

謝謝Sabbir，它似乎工作！ – MartinAbadie

這是解決由於Sabbir的評論：

大概分型的問題。嘗試聲明讓$：any;在導入後的組件文件頂部。 Sabbir Rahman

來源

2017-02-07 17:00:10 MartinAbadie

如何在Angular-CLI中使用JQVmap？

回答

相關問題