傳單 - 我似乎無法得到基本示例工作

我一直在試圖讓小葉（一個webmapping API）工作幾個小時。起初我犯了太多的錯誤，現在我只是試圖讓基本例子工作。傳單 - 我似乎無法得到基本示例工作

下面是我的代碼（HTML和Javascript）：

<!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>

總結：我是第一次得到「失蹤;語句之前」和「參考錯誤：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

非常感謝你幫助我解決了兩個難題，而你的最終答案實際上解決了我過去幾天遇到的問題。 – JakeJ

我正在用最終代碼佈局更新問題。 – JakeJ

傳單 - 我似乎無法得到基本示例工作

回答

相關問題