javascript - 传单 map 显示为灰色

标签 javascript openstreetmap leaflet

我用 quickstart 启动 leaflet.js但我的 map 显示为灰色...我缺少什么吗?

脚本.js:

var leafletMap = L.map('leafletMap').setView([51.505, -0.09], 13);

L.tileLayer('http://{s}.title.cloudmade.com/' + API_KEY + '/997/256/{z}/{x}/{y}.png', {
        attribution: 'Map data © [...]',
        maxZoom: 18
}).addTo(leafletMap);

// marker
var marker = L.marker([51.5, -0.09]).addTo(leafletMap);

样式.css:

#leafletMap {
height: 200px;
width: 200px;
}

index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My title</title>

    <link rel='stylesheet' href='css/bootstrap.css'>
    <link rel='stylesheet' href='css/leaflet.css'>
    <!--[if lte IE 8]>
        <link rel="stylesheet" href="leaflet.ie.css" />
    <![endif]-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <div id='leafletMap'></div>

<script src='js/libs/jquery-1.10.2.js'></script>
<script src='js/libs/bootstrap.js'></script>
<script src='js/libs/leaflet-src.js'></script>
<script src='js/config.js'></script>
<script src='js/script.js'></script>
</body>
</html>

给我:

enter image description here

最佳答案

您需要实现快速入门指南的下一部分:您已初始化 map ,但尚未向其中添加任何图 block 图层,因此为灰色。因此,请继续阅读以接下来我们将添加一个图 block 图层以添加到 map 开头的部分。

关于javascript - 传单 map 显示为灰色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21405189/

相关文章:

javascript - 如何从 Android Web 浏览器调用 JavaScript 接口(interface)方法?

javascript - Angular JS指令的return语句中的 '^^'是什么意思

javascript - 路由重定向到Angular问题中的其他链接

postgresql - 将 osm 文件导入 postgres/postgis 数据库

jquery - 来自 SQL Server 的位置名称和传单 map 上的绘图

javascript - 如何检测每个视频标签以及是否正在播放?

azure - 如何将命令传递给 terraform(Azure ACI + osm 切片服务器)

3d - 使用开源 3D 引擎从 Openstreetmap 数据渲染 map ?

javascript - 在传单上用 d3 覆盖圆圈会导致位置不正确

leaflet - 在传单中隐藏和显示折线?