我正在尝试使用 Jade 模板在页面上放置 map 。模板如下所示:
html
head
script(src='http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js')
link(rel='stylesheet', href='http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css')
script.
var map = L.map("map").setView([51.505, -0.09], 13);
$(document).ready(function() {
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);
});
body
#map(style='height: 500px;')
当查看页面时，生成的 HTML 如下所示:
<html>
<head>
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css"/>
<script>
var map = L.map("map").setView([51.505, -0.09], 13);
$(document).ready(function() {
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);
});
</script>
</head>
<body>
<div id="map" style="height: 500px;"></div>
</body>
</html>
将该代码添加到 JS fiddle(带有 leaflet.js 依赖项)会生成一个工作映射 - 请参阅 JSfiddle Map
本地调试时，错误返回为错误:找不到 map 容器。
我还尝试将其包装在 jquery document.ready 中以确保 DOM 已加载。
编辑:使用正确的语法将其包装在准备好的文档中确实可以工作，下面的代码可以正常工作:
html
head
h1= title
p Welcome to #{title}
script(src='http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js')
script(src='http://code.jquery.com/jquery-2.1.0.min.js')
link(rel='stylesheet', href='http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css')
script.
$(document).ready(function(){
var map = L.map("map").setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);
})
body
#map(style='height: 500px;')
最佳答案
我的解决方案是从layout.jade中删除“doctype html”语句 - 在这里找到答案:Google Maps doesn't seen in Jade - HTML works well
关于javascript - 带有 Express 和 Jade 模板的 Node.js 不显示 leaflet.js map ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23242248/