显示空白的传单地图答案

【问题标题】：Leaftlet map displaying a white space显示空白的传单地图
【发布时间】：2021-10-20 03:33:07
【问题描述】：

我正在关注一个课程的教程，我们正在使用传单地图，到目前为止的代码非常简单，一个使用引导模板、节点和 pug 的 javascript 应用程序。老师提供了步骤，但在我的情况下，地图只是没有加载，而是被一个空白区域打招呼。

我想问一下（鉴于我按照说明操作）是否有可能我犯了错误，或者我的环境中的设置是否是导致问题的原因？

首先我在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);

在布局上，我在 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

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

这是它的外观：

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

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

而且积压中也没有错误可以帮助提示正在发生的事情......

【问题讨论】：

控制台有错误吗？
你在哪里引用你的 map.js 脚本？
控制台没有错误！
我在 index.pug 脚本的底部引用了它，如下所示：script(src='js/maps.js')

标签： javascript node.js leaflet pug

【解决方案1】：

这很奇怪，但是在尝试了很多事情之后它实际上开始起作用了，我不确定是什么触发了结果，但我尝试的是：

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

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

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

【讨论】：