Question

美好的一天！我有一个小项目，我需要在我的网站上有一张地图。一切都很好，除了一个细节：背景图块显示为断开链接，没有明显（对我而言）的原因。任何和所有的帮助表示赞赏:) 这是一张图片：

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

Answer 1

由于您似乎使用自定义地图（自定义图块），您是否确保为当前有404错误的区域提供图块？

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

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

使用拼贴图层的bounds option。

请注意，此选项独立于地图的maxBounds option / setMaxBounds() method，它适用于整个地图，并影响用户互动（用户可以平移到的地方）。< / p>

宣传单地图背景图块显示为断开的链接

1 个答案: