显示白色的传单地图 space

Question

我正在学习 class 的教程，我们正在使用传单地图，到目前为止的代码非常简单，javascript 应用程序使用 bootstrap 模板、节点和哈巴狗。老师提供了步骤，但是，在我的情况下，地图只是没有加载，取而代之的是空白 space.

我想问一下（假设我遵循了说明）是否有可能是我犯了一个错误，或者是我环境中的设置导致了这个问题？

首先我在 js 中创建了地图脚本 > maps.js

var map = L.map("main_map").setView([6.1630788, -75.631681], 17);

L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution:
'&copy; <a href="https://wwww.openstreetmap.org/copyright">OpenStreetMap contributors',
}).addTo(map);

L.marker([6.1573243, -75.6324465]).addTo(map);

L.marker([6.1573243, -75.6324485]).addTo(map);

在布局上，我在 header 中添加了所需的 link 和脚本，在 layout.pug 文件中

doctype html
html
  head
  meta(charset='utf-8')
  meta(name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no')
  meta(name='description' content='')
  meta(name='author' content='')
  title BiciRed - Portal Bici-amigo
  // Favicon
  link(rel='icon' type='image/x-icon' href='assets/favicon.ico')
  // Core theme CSS (includes Bootstrap)
  link(href='css/styles.css' rel='stylesheet')
  // THIS TWO LINES ARE THE ONES RELATED TO THE MAP
  link(rel='stylesheet' href='https://unpkg.com/leaflet@1.7.1/dist/leaflet.css' integrity='sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==' crossorigin='')
  script(src='https://unpkg.com/leaflet@1.7.1/dist/leaflet.js' integrity='sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==' crossorigin='')
body
    block content

为了显示地图，我在 css > styles.css 脚本中添加了 css 代码，在末尾说明了这一点。

#main_map 
{
  height: 400px;
  width: 100%;
}

所以，认为一切都准备就绪，在我的 index.pug 脚本中，我在容器内调用地图，如下所示：

 // Map
.container
  #main_map

但不用说结果是空白 space 应该显示地图的地方。知道为什么会发生这种情况吗？

这是它的样子：

编辑：我还在 index.pug 脚本的底部引用了我的地图脚本。像这样：

  // Core theme JS
  script(src='js/scripts.js')
  script(src='js/maps.js')

而且积压中也没有错误可以帮助提示发生了什么...

Answer 1

这很奇怪，但在尝试了很多东西之后它确实开始工作了，我不确定是什么触发了结果，但我尝试的是：

1- 我将传单库添加到项目中，而不是引用它们。这本身并没有解决问题，但我认为值得一提。

2- 我重新粘贴了我的 maps.js 代码，我高度怀疑缩进问题可能是我遇到的问题的核心，因为内容是一样的。

3- 我以不同的方式尝试了运行我的代码，在完成第三步之后地图开始显示，所以我有点不确定它是否与最终结果相关但同样，可能是值得的提到.

显示白色的传单地图 space

Leaftlet map displaying a white space

javascript

node.js

leaflet

pug