单张地图背景图块显示为断开链接

Question

美好的一天！ 我正在进行一个小项目，我的网站上需要有一张地图。 除了一个细节，一切都很好，一切都很好：背景图块看起来是断开的链接，没有明显的原因（对我而言）。 感谢所有帮助：)这是一张图片：

屏幕截图

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());

Answer 1

当您似乎使用自定义地图（自定义图块）时，是否确定为当前存在404错误的区域提供了图块？

您可以打开浏览器开发人员工具（在PC上，使用F12 /在Mac上，使用Cmd + Alt + i）查看丢失的图块的URL。

如果您没有这些图块，并且不想提供它们，则只需指定自定义图块层的边界，以使Leaflet不会尝试在该区域之外下载图块。

使用图块图层的bounds选项。

请注意，此选项独立于地图的maxBounds选项 / setMaxBounds()方法，该方法适用于整个地图，并且会影响用户交互（用户可以平移到的位置）。

单张地图背景图块显示为断开链接

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-07-19 12:50:09

单张地图背景图块显示为断开链接

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-07-19 12:50:09

解决方案1
0 已采纳 2016-07-19 12:50:09