美好的一天!我有一个小元素正在进行，我需要在我的网站上有一张 map 。一切都很好，除了一个细节:背景图 block 无缘无故地显示为断开的链接(对我而言)。任何帮助表示赞赏:) 这是一张照片:
html代码:
<html>
<head>
<link rel="stylesheet" type="text/css" href="bootstr/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="dizainas.css">
<link rel="stylesheet" href="https://npmcdn.com/leaflet@1.0.0-rc.2/dist/leaflet.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
</head>
<body>
<!-- <div id="mapas"></div> -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
<a>Menu item 1</a>
</li>
<li>
<a>Menu item 2</a>
</li>
</ul>
</div>
</div>
</div>
<div id="container">
<div id="sidebar">
<div class="sidebar-wrapper">
<div id="features" class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Sidebar header</h3>
</div>
</div>
</div>
</div>
<div id="mapas"></div>
</div>
<script src="bootstr/js/bootstrap.min.js"></script>
<script src="https://npmcdn.com/leaflet@1.0.0-rc.2/dist/leaflet.js"></script>
<script src="mechanika.js"></script>
</body>
</html>
CSS:
@import 'https://fonts.googleapis.com/css?family=Slabo+27px';
html, body, #container {
height: 100%;
width: 100%;
overflow: hidden;
font-family: 'Slabo 27px', serif;
}
body {
cursor:url(http://i.imgur.com/AySurDR.png), auto;
padding-top: 50px;
background-color: lightgray;
}
.navbar {
min-height: 50px;
}
#sidebar {
float: left;
height: 100%;
max-width: 100%;
width: 150px;
}
.sidebar-wrapper {
height: 100%;
position: relative;
width: 100%;
}
@media (max-width: 767px) {
#sidebar {
display: none;
}
}
#mapas {
height: 100%;
width: auto;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
/* background-color:rgba(0,0,0,1);*/
background: #000000;
}
javascript:
console.log("nu veikia");
var map = L.map('mapas').setView([0, 0], 2);
L.tileLayer('/Users/domas/Desktop/mapas/{z}/{x}/{y}.png', {
minZoom: 2,
maxNativeZoom: 5,
maxZoom: 6,
attribution: 'ESO/INAF-VST/OmegaCAM',
noWrap: true
}).addTo(map);
var bounds = L.latLngBounds([[84, 173], [-84, -173]]);
map.setMaxBounds(bounds);
map.on('drag', function() {
map.panInsideBounds(bounds, { animate: false });
});
console.log(map.getBounds());
最佳答案
由于您似乎使用自定义 map (自定义图 block )，您是否确保为当前出现 404 错误的区域提供图 block ？
您可以打开浏览器开发者工具(在 PC 上，使用 F12/在 Mac 上，使用 Cmd + Alt + i)来查看丢失的磁贴的 URL。
如果您没有这些图 block 并且不想提供它们，您可以简单地指定自定义图 block 层的边界，这样 Leaflet 就不会尝试下载该区域之外的图 block 。
使用 bounds option你的瓷砖层。
请注意，此选项独立于 map 的 maxBounds option。/setMaxBounds() method ，适用于整个 map ，并影响用户交互(用户可以平移到的位置)。
关于javascript - 传单 map 背景图 block 显示为断开的链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38458214/