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

Question

Good day! 美好的一天！ I have a little project going and I need to have a map in my website. 我正在进行一个小项目，我的网站上需要有一张地图。 Everything is fine and well except for one detail: the background tiles appear as broken links for no apparent (to me) reason. 除了一个细节，一切都很好，一切都很好：背景图块看起来是断开的链接，没有明显的原因（对我而言）。 Any and all help is appreciated :) here's a picture: 感谢所有帮助：)这是一张图片：

屏幕截图

html code: 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: 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: 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

As you seem to use a custom map (custom tiles), did you make sure you provide tiles for the areas where you currently have 404 errors? 当您似乎使用自定义地图（自定义图块）时，是否确定为当前存在404错误的区域提供了图块？

You can open your browser developer tools (on PC, use F12 / on Mac, use Cmd + Alt + i) to see the URL of the missing tiles. 您可以打开浏览器开发人员工具（在PC上，使用F12 /在Mac上，使用Cmd + Alt + i）查看丢失的图块的URL。

If you do not have those tiles and you do not want to provide them, you can simply specify the bounds of your custom Tile Layer, so that Leaflet does not try to download tiles outside that area. 如果您没有这些图块，并且不想提供它们，则只需指定自定义图块层的边界，以使Leaflet不会尝试在该区域之外下载图块。

Use the bounds option of your Tile Layer. 使用图块图层的bounds选项。

Note that this option is independent from the map's maxBounds option / setMaxBounds() method , which applies to the entire map, and affects the user interaction (where the user can pan to). 请注意，此选项独立于地图的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