Vue.js 我想让我的imagemap在Vue项目中响应

我正在使用Vue.js开发一个网站，我需要实现一个图像，用户可以在其中单击某个特定部分，它将向他显示信息。我做了一些研究，发现在图像地图上可以创建带有区域的地图。在每个区域上，我将添加一个eventListener来显示信息

<img id="schema" style="width:100%;height:100%" src="../../assets/realisations/drahi.png"  alt="drahi" usemap="#image-map"/>  
<map name="image-map">
     <area target="" alt="network" title="network" href="#" v-on:click="change($event)" coords="190,718,292,665,215,312,190,302,168,314,88,673" shape="poly">
     <area target="" alt="batterie" title="batterie" href="#" v-on:click="change($event)" coords="581,356,599,381,634,392,666,394,704,386,727,369,734,360,734,209,724,188,704,177,680,171,644,171,618,178,593,188,581,209,581,238" shape="poly">
     <area target="" alt="pv" title="pv" href="#" v-on:click="change($event)" coords="756,297,846,378,1212,188,1123,107" shape="poly">
     <area target="" alt="load" title="load" href="#" v-on:click="change($event)" coords="545,791,577,804,659,764,657,675,593,644,545,669" shape="poly">
     <area target="" alt="car" title="car" href="#" v-on:click="change($event)" coords="568,1033,557,1027,544,1032,532,1026,523,1011,498,995,461,976,439,963,418,966,405,949,397,931,392,914,401,893,420,877,443,860,462,850,494,834,523,836,558,850,587,867,606,885,628,904,646,925,663,944,669,972,654,985,622,1007" shape="poly">
</map>

. 但是当我在组件中导入它时，我遇到了一个错误。以下是我在E4CChart.vue中导入的方式：

<script>
   import Highcharts from 'highcharts';
   import { Chart } from 'highcharts-vue';
   import { ImageMap } from "image-map";
</script>


从“Highcharts”导入Highcharts；
从“highcharts vue”导入{Chart}；
从“图像映射”导入{ImageMap}；

这就是错误：

找不到模块“映像映射”的声明文件。
'C:/Users/gerau/OneDrive/Bureau/Stage\LMD\u DUT\u Informatique/FRONTEND/FRONTEND/node\u modules/image map/dist/image map.js'
隐式具有“any”类型。尝试
npmi--save dev@types/image map
如果存在，或添加新的声明（.d.ts）文件，其中包含
声明模块“图像映射”Ve

tur（7016）

我确实尝试了命令
npmi…
，但是它给了我一个404错误，没有找到任何东西

所以我问你，你知道如何解决我的问题吗？

PS：这是项目的结构

我的项目


距离
节点单元


海图
highcharts vue
影像地图

距离

image-map.es.js
image-map.jquery.js
image-map.js


package.json




公开的
src

组成部分

实现

E4CChart.vue






环境署署长
babel.config.js
package-lock.json
package.json
vue.config.js
因为无论是
图像映射
包本身还是DefinitelyTyped项目（
@types/*
）都没有为此包提供TypeScript声明文件，所以您需要在自己的项目中包含一个，以便您的TypeScript代码可以使用它

幸运的是，包的API似乎相对简单。您可以将以下内容放入新的
src/image map.d.ts
文件中：

声明模块“图像映射”{
导出默认函数ImageMap（选择器：字符串，去盎司？：编号）：void；
}

（从技术上讲，该函数返回一个实现该功能的类实例，但我认为它的成员不是公开的，而且您可能根本不需要它们。）
我按照您所说的做了，但没有做任何更改。我的项目只使用
vue init webpack simple appname
创建，我确实安装了图像映射after@Tios您是否打算创建一个TypeScript项目而不是一个普通的JavaScript项目？如果需要纯JS，可能需要将不同的设置传递到
vue init
。如果您想要TS，那么顶部目录中应该有一个
tsconfig.json
文件；请分享这一点，因为这可能会解释为什么没有看到这些声明。