传单地图显示灰色
Con*_*ech 20 javascript openstreetmap leaflet
我正在使用快速入门启动leaflet.js,但我的地图显示为灰色...是否有我遗漏的东西？
的script.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);
style.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>
给我:
tmc*_*mcw 36
您需要实现"快速入门指南"的下一部分:您已初始化地图,但尚未向其添加任何切片图层,因此为灰色.因此请继续阅读以Next开头的部分,我们将添加一个图块层以添加到我们的地图中.
- +1用于帮助传单教程,它需要在tile图层代码之后放置第一个'demo'.它的位置不仅位于`var map = L.map('map')的上方.setView([51.505,-0.09],13);`给出了地图应该在那一点工作的错觉. (15认同)
- 您可以在答案中添加示例代码来执行此操作： `L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?{foo} ', {foo: 'bar', attribution: '地图数据 © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> 贡献者，<a href="https://creativecommons .org/licenses/by-sa/2.0/">CC-BY-SA</a>'}).addTo(地图);` (3认同)
Ama*_*zon 19
页面加载时尝试此操作；
setTimeout(function () {
window.dispatchEvent(new Event('resize'));
}, 1000);
另一件事要注意。
如果您检查网络选项卡并且地图图块加载正常，但地图仍然保持灰色，这可能是由于周围页面的 CSS 污染。
就我而言，它是：
img {
max-height: 100%;
}
通过覆盖修复：
.my-leaflet-map-container img {
max-height: none;
}
| 归档时间： |
|
| 查看次数： |
19920 次 |
| 最近记录： |