Leaflet.js - 사용자 지정지도 서버 사용

타일은 내 로컬 서버에서 호스팅되고 Leaflet.js에 의해 렌더링되는 사용자 지정지도를 포함하려고했습니다. 그러나, 내 html 페이지에지도를 표시하는 데 어려움을 겪고 있습니다. 스크린 샷은 다음과 같습니다. enter image description here Leaflet.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

많은 감사들 :

출처

2014-09-15 Master_A2Z

브라우저 자바 스크립트 콘솔의 내용은 무엇입니까? – YaFred

@FranceImage, 콘솔에 오류가 없습니다. –

각 위치별로 올바른 타일을 선택했는지 확인할 수 있습니까? 참조 http://wiki.openstreetmap.org/wiki/Slippy_map_tilenames를 확인하십시오 – sabas

당신은 전단지의 CSS를 포함하지 않았습니다. 당신이해야하고, 당신이 할 때, 이것은 작동합니다.

출처

2014-09-15 16:19:17 tmcw

Leaflet.js - 사용자 지정지도 서버 사용

답변

관련 문제