gpt4 book ai didi

javascript - 传单 map 背景图 block 显示为断开的链接

转载 作者:行者123 更新时间:2023-11-28 05:32:02 26 4
gpt4 key购买 nike

美好的一天!我有一个小元素正在进行,我需要在我的网站上有一张 map 。一切都很好,除了一个细节:背景图 block 无缘无故地显示为断开的链接(对我而言)。任何帮助表示赞赏:)这是一张照片:

screenshot

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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com