时间戳

首页 > 解决方案 > 显示空白的传单地图

javascript - 显示空白的传单地图

问题描述

我正在关注一个类的教程，我们正在使用传单地图，到目前为止的代码非常简单，一个使用引导模板、节点和 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')

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

在此处输入图像描述

标签： javascriptnode.jsleafletpug

解决方案

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

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

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

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

推荐阅读