Question

我们正在尝试将用户生成的标记保存到我们的传单地图中。我们将标记信息（坐标，名称等）全部存储在数据库中。我们知道如何调用数据库信息并将其应用到我们的页面（如果它是纯文本），而不是作为地图的标记。有人对此有经验吗？旁注：我们正在使用pug和mongodb。

Answer 1

用pug编写内联JavaScript听起来并不复杂：

How can I render inline JavaScript with Jade?

文档：https://pugjs.org/language/plain-text.html#block-in-a-tag

然后按照传单tutorial编写相应的JavaScript以在地图上创建标记。

var map = L.map('map').setView([48.86, 2.35], 11);

L.marker([48.86, 2.35]).addTo(map);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>

<div id="map" style="height: 180px"></div>

您可以用哈巴狗翻译：

doctype html
html(lang="en")
  head
    link(rel='stylesheet', href='https://unpkg.com/leaflet@1.3.1/dist/leaflet.css')
    script(src='https://unpkg.com/leaflet@1.3.1/dist/leaflet-src.js')
    style.
      #map {height: 180px;}
  body
    #map
    script.
      var map = L.map('map').setView([48.86, 2.35], 11);

      L.marker([48.86, 2.35]).addTo(map);

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

Interpolation也应该在script.块中工作（例如L.map([#{lat}, #{lng}])），但是您可能更喜欢处理数组/对象，在这种情况下，您需要unescaped interpolation以及其他对象。进行分类的工具。

例如参见：https://github.com/pugjs/pug/issues/396

!{stringify(variable)}

pug.renderFile('template.pug', {stringify: require('js-stringify')});

（使用js-stringify）

存储用户生成的传单数据以进行映射

1 个答案: