Leaflet.js-使用自定义地图服务器
[英]Leaflet.js - Using custom map server
问题描述
I've been trying to embed a custom map, of which the tiles are hosted on my local server and is rendered by Leaflet.js. 
我一直试图嵌入一个自定义地图，其中的图块托管在本地服务器上，并由Leaflet.js呈现。 However, I'm having some difficulty in displaying the map on my html page. 但是，在将地图显示在html页面上时遇到了一些困难。 Here is the screenshot: 这是屏幕截图：
this is a "supposed" picture of my country Philippines on zoom 10 but was displayed like that. 这是我的国家（菲律宾）放大10倍的“假想”图片，但以这种方式显示。 Also, the map tiles are generated using Maperitive. 此外，地图图块是使用Maperitive生成的。 Hope anyone can help me here. 希望任何人都可以在这里帮助我。 This is my code. 这是我的代码。
<!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 © <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>
Many thanks guys :) 非常感谢大家:)
1 个解决方案
解决方案1
1 已采纳 2014-09-15 16:19:17
You haven't included Leaflet's CSS. 您尚未包括Leaflet的CSS。 You need to, and when you do, this will work. 您需要，并且当您这样做时，它将起作用。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.