时间戳

首页 > 解决方案 > 将用户生成的传单数据存储到地图

html - 将用户生成的传单数据存储到地图

问题描述

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

标签： htmlmongodbleafletpug

解决方案

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

如何使用 Jade 呈现内联 JavaScript？

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

然后按照 Leaflet教程编写适当的 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);

插值也应该在script.块内工作（例如L.map([#{lat}, #{lng}])），但您可能更喜欢处理数组/对象，在这种情况下，您需要未转义的插值，并使用其他工具进行字符串化。

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

!{stringify(variable)}

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

（使用js-stringify）

推荐阅读