【发布时间】：2021-09-23 12:35:21
【问题描述】：
我正在尝试重现更简单的示例，即使用传单站点中所示的传单加载地图，但使用打字稿进行编码。我没有使用任何框架，如 angular 或 react。 我已经通过 npm 安装了传单和类型。 为了遵循我们的指导方针，html 是在运行时构建的，根据需要添加 div 等，特别是对于我在类的构造函数中的地图：
...
this.MapFrame = document.createElement('div');
this.MapFrame.style.height = "416px";
this.MapFrame.style.width = "616px";
this._mapArea = document.createElement('div');
this._mapArea.style.height = "400px";
this._mapArea.style.width = "600px";
this._mapArea.id = "mapid";
this.MapFrame.appendChild(this._mapArea);
... 并将 MapFrame 添加到文档中。
类的方法如下：
this.mymap = L.map("mapid").setView([51.505, -0.09], 13);
即使我之前没有调用任何传单代码，该行也会出现“容器已初始化”错误。如果我删除包含地图的 div 并放置另一个将立即用地图填充而无需任何调用的 div。如果我尝试：
this.mymap = L.map(this._mapArea).setView([51.505, -0.09], 13);
我可以设法加载地图，但尝试通过拖动来移动它会出现 Uncaught TypeError: t.classList.contains is not a function
虽然可以使用按钮或鼠标滚轮进行缩放。
In a base html there's the script and css inclusion, attached there is the resulting html.
谁能帮助我了解幕后发生的事情？特别是我无法理解为什么即使我之前没有调用它也会加载地图以及为什么我不能拖动它。
【问题讨论】：
-
欢迎来到 SO！鉴于当前共享的信息，您的问题确实看起来很奇怪。请您提供您的问题的实时复制示例，例如使用 CodeSandbox 或 StackBlitz？见How to create a Minimal, Reproducible Example
-
感谢您的回复！这是一个沙盒：link，它可以工作，但我的不行。尝试抓取地图或单击地图时，我一直收到错误消息...似乎我必须更好地查看我的代码，但直到现在无法管理查看位置。
-
欢迎您！您通过帖子末尾的链接包含的屏幕截图分辨率太低，无法放大并阅读文本。您能否从最里面的
<div>复制并粘贴捕获所有相关信息的代码？
标签： typescript leaflet