【问题标题】：Maps with Leaflet not working带有传单的地图不起作用
【发布时间】：2014-04-10 19:35:16
【问题描述】：

我有一个小（也许）愚蠢的问题。我想在页面上放一张 Leaflet 地图，所以我下载了 .css 文件和 .js 文件，加载它并没有任何反应，它只是放了一个带有 + 和 - 控件但没有地图的灰色 div，有人可以帮我吗？，谢谢你的帮助。

我的代码是这样的：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 Demo</title>
<link rel="stylesheet" href="styles.css" />
    <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk
    /html5.js"></script>
    <![endif]-->
<link rel="stylesheet" href="leaflet.css" />
<script src="leaflet.js"></script>
<style type="text/css">
    #map { height: 180px; }
</style>
</head>
<body>
    <div id="map"></div>
</body>
<script type="text/javascript">
    var map = L.map('map').setView([51.505, -0.09], 13);
</script>
</html>

这是控制台输出：

考虑使用“dppx”单位而不是“dpi”，因为在 CSS 中“dpi”表示每 CSS 英寸的点数，而不是每物理英寸的点数，因此与实际的“dpi”不对应一个屏幕。在媒体查询表达式中：（最小分辨率：144dpi）leaflet.js:6 考虑使用“dppx”单位而不是“dpi”，因为在 CSS 中“dpi”表示每 CSS 英寸的点数，而不是每物理英寸的点数，因此与屏幕的实际“dpi”不对应。在媒体查询表达式中：(min-resolution: 144dpi)

【问题讨论】：

标签： javascript css mobile leaflet

【解决方案1】：

请仔细检查您是否正确设置了所有内容。查看this getting started page。看起来你可能没有引用你的瓷砖？

// create a map in the "map" div, set the view to a given place and zoom
var map = L.map('map').setView([51.505, -0.09], 13);

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

【讨论】：