无法将数据映射库导入 Angular 2 应用程序的 HTML 中

我正在构建一个小的angular 2应用程序用于学习目的，我计划使用datamaps作为地图接口。

但是这个库还没有指令，所以我试着自己热接线。

我已经安装了数据地图

npm install datamaps

和我使用ng服务从angular-cli，但我不能使它工作，我已经尝试导入它直接在HTML(只是为了看看它是否工作)，它找不到库。

我从直接HTML导入中得到这个，即使文件在正确的位置，它也不会发送到浏览器

datamaps.world.hires.min.js:1 Uncaught SyntaxError: Unexpected token <

我把它添加到我的包里。Json并尝试在我的组件中使用它，但也找不到它。

在我的package.json

"datamaps": "^0.5.8"

如果我像这样使用它，应该怎么做才能看到它:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>AskTheWorld</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
  <script src="../node_modules/datamaps/dist/datamaps.world.hires.min.js"></script>
</head>
<body>
  <app-geochart-component>Loading...</app-geochart-component>
  <div id="container" style="position: relative; width: 500px; height: 500px;"></div>
  <script>
    var map = new Datamap({element: document.getElementById('container')});
  </script>
</body>
</html>

还有，把它导入我的组件的最好方法是什么?我已经看到，datamaps没有类型声明或模块从我可以找到(我使用TS 2)

这是目前为止我的组件

import {Component, OnInit, ViewChild} from '@angular/core';进口{Datamap} '../../../node_modules datamaps/dist/?????????????';

@Component({
  selector: 'app-geochart-component',
  templateUrl: './geochart-component.component.html',
  styleUrls: ['./geochart-component.component.css']
})
export class GeochartComponentComponent implements OnInit {
  @ViewChild('container') canvas;
  constructor() { }
  ngOnInit() {
    var map = new Datamap(this.canvas);
  }
}
}

所以您知道如何包含脚本。现在要从Angular中使用它，你有几个选项:

选项1(快速和肮脏，但工作):在组件顶部创建一个const Datamap(假设库的JavaScript对象称为"Datamap"):

const Datamap;

然后在调用new datamap时使用该对象:

ngOnInit() {
  var map = new Datamap(this.canvas);
}

选项2(更复杂但更好的方法)。我还没有这样做的组件，但想法是相同的所有外部组件。)通过将Datamap组件注入Angular组件，在应用启动时引导它。

如何将从后端呈现的参数传递给angular2引导方法

不使用javascript来显示地图:

<script> var map = new Datamap({element: document.getElementById('container')}); </script>

创建一个@ViewChild是不必要的，而且ngOnInit()只需添加ngAfterContentInit()就像这样，例如:

    ngAfterContentInit():void {
       var map = new Datamap({
        element: document.getElementById('container'),
        projection: 'mercator',
        fills: {
            defaultFill: "#ABDDA4",
            authorHasTraveledTo: "#fa0fa0"
        },data: {
          USA: { fillKey: "authorHasTraveledTo" },
          JPN: { fillKey: "authorHasTraveledTo" },
          ITA: { fillKey: "authorHasTraveledTo" },
          CRI: { fillKey: "authorHasTraveledTo" },
          KOR: { fillKey: "authorHasTraveledTo" },
          DEU: { fillKey: "authorHasTraveledTo" },
        }
       });
       var colors = d3.scale.category10();
     }

将datamaps文件导入到组件中。

import * as Datamap from 'node_modules/datamaps/dist/datamaps.world.min.js';

希望能有所帮助

看完这篇文章后终于让它工作了

不完全是我要找的，因为它是角的范围之外，我不能使用它作为一个组件的一部分，但…但至少现在地图显示出来了。

将以下行添加到angular-cli。Json，并且可用。

  "scripts": [
    "../node_modules/datamaps/dist/datamaps.world.min.js"
  ],

按照以下步骤运行:

1) NPM安装datamaps2)在tsconfig.json中加入allowJs: true3)在".angular-cli.json"中包含以下内容

"scripts": [
        "../node_modules/d3/d3.js",
        "../node_modules/topojson/build/topojson.js",
        "../node_modules/datamaps/dist/datamaps.world.min.js"
      ],

4)在组件文件中包含以下内容:

declare var Datamap:any;
declare var d3:any;

ngAfterContentInit():void {
           var map = new Datamap({
            element: document.getElementById('container'),
            projection: 'mercator',
            fills: {
                defaultFill: "#ABDDA4",
                authorHasTraveledTo: "#fa0fa0"
            },data: {
              USA: { fillKey: "authorHasTraveledTo" },
              JPN: { fillKey: "authorHasTraveledTo" },
              ITA: { fillKey: "authorHasTraveledTo" },
              CRI: { fillKey: "authorHasTraveledTo" },
              KOR: { fillKey: "authorHasTraveledTo" },
              DEU: { fillKey: "authorHasTraveledTo" },
            }
           });
           var colors = d3.scale.category10();
         }

相关内容

最新更新

热门标签：