时间戳

首页 > 解决方案 > 如何在 ionic 应用程序中将 zoomhome 插件添加到传单地图？

javascript - 如何在 ionic 应用程序中将 zoomhome 插件添加到传单地图？

问题描述

我正在尝试将zoomHome插件添加到我的 ionic 应用程序中的传单地图中。

在添加此代码之前，地图已按预期显示。

<head>我在以下部分添加了以下代码index.html：

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
<script src="assets/external-assets/leaflet.zoomhome.min.js"></script>
<link rel="stylesheet" href="assets/external-assets/leaflet.zoomhome.css" />

在我的资产文件夹中，我创建了一个名为 external-assets 的子文件夹，并从 https://github.com/torfsen/leaflet.zoomhome/tree/master/dist复制了以下文件：

在这里，我将默认缩放设置为 false：

this.map = L.map('map', {
      center: [lat, lng],
      zoomControl: false
    });

然后我添加 zoomHome 控件：

let zoomHome = L.Control.zoomHome({ position: 'topright' });
zoomHome.addTo(this.map);

但是，当我运行 ionic serve 时，我收到此控制台错误：

未捕获的 ReferenceError：L 未在 leaflet.zoomhome.min.js:5 处定义

还会记录此错误：

错误：未捕获（承诺）：TypeError：leaflet__WEBPACK_IMPORTED_MODULE_3__.Control.zoomHome 不是函数 TypeError：leaflet__WEBPACK_IMPORTED_MODULE_3__.Control.zoomHome 不是 HomePage.initMap 中的函数

有人可以告诉我我做错了什么，以及如何解决？

标签： javascriptangularleafletionic4angular-leaflet-directive

解决方案

推荐阅读