전단지 - 기본 예제가 작동하지 않는 것 같습니다.

저는 수 시간 동안 작업하는 전단지 (webmapping API)를 얻으려고 노력해 왔습니다. 처음에 나는 너무 많은 것을 시도하는 실수를했습니다. 이제는 기본적인 예제가 작동하도록 노력하고 있습니다.전단지 - 기본 예제가 작동하지 않는 것 같습니다.

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <script src="./leaflet.js"></script> 
     <link rel="stylesheet" type="text/css" href="./leaflet.css" /> 
     <script type="text/javascript"> 
      function initmap(){ 
       var map1 = L.map('map'); 
       //map1.setView([38.642433, -90.255372]),9); //Thanks! 
       map1.setView([38.642433, -90.255372],9); 

       // add an OpenStreetMap tile layer 
       L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 
         attribution: '&amp;copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
       }).addTo(map1); 
      } 
     </script> 
     <style> 
      #map { 
       position: absolute; 
       top: 0; 
       right: 0; 
       left: 0; 
       bottom: 0; 
       top: 0; 
       z-index: 0; 
      } 
    </style> 
     <!-- Without this styling to set the map dimension, the tiles will get downloaded, but nothing will display on the map div! Thank you choz for answering this question! --> 
    </head> 

    <body onload="initmap()"> 
     <div id='map'></div> 
    </body> 
</html>

요약 :

여기 내가 가지고있는 코드 (HTML 및 자바 스크립트)의 내가 먼저 "실종; 문 앞에"점점에 있었고 "참조 오류 : 정의되지 initmap". 이것은 choz의 첫 번째 주석에 따라 맵 정의에서 여분의 괄호를 제거하여 수정되었습니다. 그런 다음지도가 다운로드되지 않는데도 문제가 발생했습니다. Choz는지도에 필요한 스타일에 관해 다시 한 번 언급했습니다. 위의 작업 코드가 포함되었습니다.

출처

2016-06-27 JakeJ

map1.setView '([38.642433, -90.255372), 9)'map1.setView ([38.642433, -90.255372] '로, 9)'. – choz

와우. 나는 그것을 보지 못했다고 믿을 수 없다. 금요일까지 새벽 만남이있을 때까지 코드에 갔었는데, 아마도 잠을 자지 못했을 것입니다. – JakeJ

이제 오류는 발생하지 않지만 실제로 이상한 내용은 없습니다. 개발자 도구로 F12 키를 누르고 네트워크 탭으로 이동하면 적절한 타일 이미지가 모두 다운로드 된 것을 볼 수 있습니다. – JakeJ

아마도 #map의 크기를 설정하는 것을 잊었을 것입니다. 어떻게 작동하는지 아주 기본적인 샘플이 있습니다.

// create a map in the "map" div, set the view to a given place and zoom 
 
var map = L.map("map").setView([39.50, -98.35], 5); 
 

 
// add an OpenStreetMap tile layer 
 
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

#map { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    top: 0; 
 
    z-index: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" /> 
 
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script> 
 
<div id='map'></div>

출처

2016-06-27 01:23:03 choz

두 번 choz를 도와 주셔서 대단히 감사합니다. 그리고 최종 답변은 실제로 내가 겪어 본 문제를 해결했습니다. – JakeJ

최종 코드 레이아웃으로 질문을 업데이트하고 있습니다. – JakeJ

전단지 - 기본 예제가 작동하지 않는 것 같습니다.

답변

관련 문제