2014-09-15 4 views
0

Я пытался внедрить пользовательскую карту, фрагменты которой размещены на моем локальном сервере и отображаются листом Leaflet.js. Тем не менее, мне сложно отображать карту на моей странице html. Вот скриншот: enter image description hereLeaflet.js - Использование пользовательского сервера карт

это «предполагаемая» картина моей страны Филиппины по масштабированию 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

Большое спасибо, ребята :)

+0

Что скажет ваша браузерная консоль javascript? – YaFred

+0

@FranceImage, без ошибок на консоли –

+0

Не могли бы вы проверить, правильно ли он выбирает правильную плиту для каждой позиции? Проверьте это для справки http://wiki.openstreetmap.org/wiki/Slippy_map_tilenames – sabas

ответ

1

Вы не включили CSS листовка в. Вам нужно, и когда вы это сделаете, это сработает.

Смежные вопросы