Question

我一直在尝试嵌入一个自定义地图，其中的图块托管在我的本地服务器上，并由Leaflet.js呈现。但是，我在html页面上显示地图时遇到了一些困难。以下是屏幕截图： enter image description here

这是我国菲律宾在缩放10上的“假设”照片，但显示的是这样的。此外，使用Maperitive生成地图图块。希望有人可以帮助我。这是我的代码。

<!DOCTYPE HTML>
<title>Offline Map Example</title>
<head>
<script type="text/javascript" src="../js/leaflet.js"></script>
<script type="text/javascript" src="../js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.10.4.js"></script>

<script type="text/javascript">
$("#document").ready(function() {
    var map = L.map('map', {
        minZoom: 10,
        maxZoom: 14,
        zoom: 10,
        center: [11.5326,122.7457]
    });

    L.tileLayer('http://localhost/Tiles/{z}/{x}/{y}.png', {
        attribution: 'Map data &copy; <a     href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
    }).addTo(map);

    var southWest = L.LatLng(4.22816513512253, 116.389103446625),
    northEast = L.LatLng(21.6156671213737, 126.979526808346),
    bounds = L.LatLngBounds(southWest, northEast);
    map.setMaxBounds(bounds); 

}); 
</script>
</head>
<body>
   <div id="map" name="map" style="height: 440px; border: 1px solid #AAA;"></div>
</body>
</html>

enter image description here

非常感谢你们：）

Answer 1

您尚未收录Leaflet的CSS。你需要，当你这样做时，这将有效。

Leaflet.js - 使用自定义地图服务器

1 个答案: