离子反应应用程序无法识别传单插件答案

【问题标题】：Ionic react application does not recognize Leaflet Plugin离子反应应用程序无法识别传单插件
【发布时间】：2021-03-04 05:55:40
【问题描述】：

我面临以下问题：

我想在我的 Ionic-React 应用程序中包含一个 Leaflet 插件 (AwesomeMarkers)。在插件的ReadMe之后，我必须在leaflet库之后包含FontAwesome，插件JS文件和插件CSS文件。

https://github.com/lvoogdt/Leaflet.awesome-markers

我确实将它包含在我的 index.html 中，它看起来像这样：

    <!-- LEAFLET -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
   integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
   crossorigin=""/>

    <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
   integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
   crossorigin=""></script>

   <!-- LEAFLET AWESOME MARKERS -->
    <script src="https://kit.fontawesome.com/d2ca6e6d71.js" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="assets/css/leaflet.awesome-markers.css">

    <script src="assets/leaflet.awesome-markers.min.js"></script>

现在我应该可以使用插件了

window.L.AwesomeMarkers.icon({..})

但是 window.L 对象没有 AwesomeMarkers 函数。

AwesomeMarkers.js 文件和 AwesomeMarkers.css 在我的网络分析视图中加载时显示状态 304。

我还通过 npm 安装了传单和插件，但它并没有解决我的问题。

谁能告诉我为什么我无法使用该插件？

提前致谢

【问题讨论】：

标签： reactjs ionic-framework npm leaflet cdn

【解决方案1】：

通过使用@types 保存模块来解决它：

npm install --save @types/leaflet.awesome-markers

并像这样导入它：

import 'leaflet.awesome-markers';

【讨论】：