Question

我正在开展Angular项目（ng-version = 4.4.6）。我需要一张没有连接的地图。我想试试jvectormap。我找到的文档和每个例子都是针对Angular.js显示的。由于我在Angular中没有经过实验，我不知道如何实现这个库并在我的项目中使用它。

有没有人在项目中使用它并可以告诉我的方式？

由于

Answer 1

您应该包含jQuery和jVectorMap文件，就像index.html中的官方文档中所描述的那样然后在组件内部，您必须通过执行此操作来声明jQuery，只需使用bollow @Component装饰器。

declare var jQuery: any;

然后你可以通过示例ngAfterViewInit()添加此代码

ngAfterViewInit(){
  jQuery('#world-map').vectorMap();
}

在组件html文件中添加此

<div id="world-map" style="width: 600px; height: 400px"></div>

在index.html中

<link href="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/jquery-jvectormap.css"></link
<script src="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/jquery-jvectormap.min.js"></script>

问题在于，由于打字稿，你可以轻松地使用jQuery或纯JS

Answer 2

1）将以下库导入您的角度项目中

 "ika.jvectormap": "themicon/ika.jvectormap"

2）将以上内容放入package.json并运行npm install。 3）然后在src中创建一个文件vendor.ts，并在其中粘贴以下语句：

import '../node_modules/ika.jvectormap/jquery-jvectormap-1.2.2.min.js';
import '../node_modules/ika.jvectormap/jquery-jvectormap-world-mill-en.js';
import '../node_modules/ika.jvectormap/jquery-jvectormap-us-mill-en.js';

4）在main.ts文件中导入以下vendor.ts文件：

import './vendor.ts';

5）将样式文件导入style.scss文件：

@import '~ika.jvectormap/jquery-jvectormap-1.2.2.css';
@import './assets/styles/vector-map';

6）在您的资产文件夹中创建一个自定义的ventor-map.scss文件，然后粘贴以下内容：

  $vmap-label-bg: #313232;
  $vmap-zoom-ctrl-bg: #515253;

  body {

    .jvectormap-label {
     position: absolute;
     display: none;
     border: solid 1px $vmap-label-bg;
     border-radius: 2px;
     background: $vmap-label-bg;
     color: white;
     padding: 3px 6px;
     opacity: 0.9;
     z-index: 1100;
    }

 .jvectormap-zoomin, .jvectormap-zoomout {
     position: absolute;
     left: 10px;
     width: 22px;
     height: 22px;
     border-radius: 2px;
     background: $vmap-zoom-ctrl-bg;
     padding: 5px;
     color: white;
     cursor: pointer;
     line-height: 10px;
     text-align: center;
 }

 .jvectormap-zoomin {
     top: 10px;
 }

 .jvectormap-zoomout {
     top: 30px;
 }
}

7）创建一个指令为vector-map.ts并在app.module.ts中声明

import { OnInit, Directive, Input, ElementRef, OnDestroy } from '@angular/core';
declare var $: any;
@Directive({
 selector: '[vectormap]'
})
export class VectormapDirective implements OnInit, OnDestroy {
@Input() mapHeight: number;
@Input() mapName: any;
@Input() mapOptions: any;
@Input() seriesData: any;
@Input() markersData: any;
$element: any;
constructor(public element: ElementRef) { }

ngOnInit() {

    this.$element = $(this.element.nativeElement);
    this.$element.css('height', this.mapHeight);

    if (!this.$element.length || !this.$element.vectorMap) {
        return;
    }

    this.$element.vectorMap({
        map: this.mapName,
        backgroundColor: this.mapOptions.bgColor,
        zoomMin: 1,
        zoomMax: 8,
        zoomOnScroll: false,
        regionStyle: {
            initial: {
                'fill': this.mapOptions.regionFill,
                'fill-opacity': 1,
                'stroke': 'none',
                'stroke-width': 1.5,
                'stroke-opacity': 1
            },
            hover: {
                'fill-opacity': 0.8
            },
            selected: {
                fill: 'blue'
            },
            selectedHover: {
            }
        },
        focusOn: { x: 0.4, y: 0.6, scale: this.mapOptions.scale },
        markerStyle: {
            initial: {
                fill: this.mapOptions.markerColor,
                stroke: this.mapOptions.markerColor
            }
        },
        onRegionLabelShow: (e, el, code) => {
            if (this.seriesData && this.seriesData[code]) {
                el.html(el.html() + ': ' + this.seriesData[code] + ' visitors');
            }
        },
        markers: this.markersData,
        series: {
            regions: [{
                values: this.seriesData,
                scale: this.mapOptions.scaleColors,
                normalizeFunction: 'polynomial'
            }]
        },
    });
}

ngOnDestroy() {
    this.$element.vectorMap('get', 'mapObject').remove();
}}

8）将以下内容放在要使用地图的页面/组件中：

In.html file:

 <div class="col-xs-12">
      <div vectormap [mapHeight]="700" 
      [mapName]="mapName" 
      [seriesData]="seriesData" 
      [markersData]="markersData" 
      [mapOptions]="mapOptions" ></div>

在.ts文件中：

  mapName: string;
  seriesData: any;
  markersData: any;
  mapOptions: any;
   defaultColors: any = {
   markerColor: '#23b7e5',      // the marker points
   bgColor: 'transparent',      // the background
   scaleColors: ['#878c9a'],    // the color of the region in the serie
   regionFill: '#bbbec6'       // the base region color
  };


 constructor() {
this.mapName = 'world_mill_en';

this.mapOptions = {
  markerColor: this.defaultColors.markerColor,
  bgColor: this.defaultColors.bgColor,
  scale: 1,
  scaleColors: this.defaultColors.scaleColors,
  regionFill: this.defaultColors.regionFill
};

this.seriesData = {
  'CA': 11100,   // Canada
  'DE': 2510,    // Germany
  'FR': 3710,    // France
  'AU': 5710,    // Australia
  'GB': 8310,    // Great Britain
  'RU': 9310,    // Russia
  'BR': 6610,    // Brazil
  'IN': 7810,    // India
  'CN': 4310,    // China
  'US': 839,     // USA
  'SA': 410      // Saudi Arabia
};

this.markersData = [
  { latLng: [41.90, 12.45], name: 'Vatican City' },
  { latLng: [43.73, 7.41], name: 'Monaco' },
  { latLng: [-0.52, 166.93], name: 'Nauru' },
  { latLng: [-8.51, 179.21], name: 'Tuvalu' },
  { latLng: [7.11, 171.06], name: 'Marshall Islands' },
  { latLng: [17.3, -62.73], name: 'Saint Kitts and Nevis' },
  { latLng: [3.2, 73.22], name: 'Maldives' },
  { latLng: [35.88, 14.5], name: 'Malta' },
  { latLng: [41.0, -71.06], name: 'New England' },
  { latLng: [12.05, -61.75], name: 'Grenada' },
  { latLng: [13.16, -59.55], name: 'Barbados' },
  { latLng: [17.11, -61.85], name: 'Antigua and Barbuda' },
  { latLng: [-4.61, 55.45], name: 'Seychelles' },
  { latLng: [7.35, 134.46], name: 'Palau' },
  { latLng: [42.5, 1.51], name: 'Andorra' }
  ];
  }

注意：您需要先将jquery导入angular.json文件中，否则会出现jquery错误

如何在angular中实现jvectormap

2 个答案: