angular - 如何在 Angular 中实现 jVectorMap

标签 angular jvectormap

我正在开发一个 Angular 项目 (ng-version=4.4.6)。我需要一张无需连接即可工作的 map 。我想尝试 jvectormap。显示了 Angular.js 的文档和我找到的每个示例。由于我对 Angular 没有太多的经验,所以我不知道如何实现这个库并在我的项目中使用它。

有人在项目中使用过它并且可以告诉我方法吗?

谢谢

最佳答案

您应该包含 jQuery 和 jVectorMap 文件,就像在您的 index.html 中的官方文档中描述的那样

然后在你的组件中,你必须通过 @Component 装饰器来声明 jQuery。

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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="056f736066716a7768647545372b352b31" rel="noreferrer noopener nofollow">[email protected]</a>/jquery-jvectormap.css"></link
<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e9839f8c8a9d869b848899a9dbc7d9c7dd" rel="noreferrer noopener nofollow">[email protected]</a>/jquery-jvectormap.min.js"></script>

问题是,通过 typescript 的 Angular 2,您可以轻松使用 jQuery 或纯 JS

关于angular - 如何在 Angular 中实现 jVectorMap,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47717464/

相关文章:

javascript - 移动设备上的 jVectorMap 需要点击 2 次

javascript - jvectormap 标记标签图像

jquery - 如何使用 jVectorMap 从 onRegionClick 回调内的 map 数组中获取州名称?

d3.js - D3 数据映射(或 jvectormap): How to put a custom object on map by coords

javascript - 如果我用 jvectormap hide() 创建一个 map ,改变我的窗口宽度,然后 show() 它,它会自己缩放到很小

Angular on keyup.enter 将输入的当前文本发送到方法

用于切换类的 Angular ngClass 和单击事件

angular - Dart Angular 2 Transclusion 使用带有多个选择器的 ng-content

angularjs - Angular2 ngFor 产生额外的循环

service - 在 Angular 2 中使用服务单例作为数据源的示例