地圖沒有顯示使用JavaScript？

-2

我使用html和javascript代碼創建了一個地圖，但沒有顯示出來。我的代碼好嗎？我是否以正確的方式調用Esri底圖？地圖沒有顯示使用JavaScript？

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>Map</title> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

    <!-- Load Leaflet from CDN--> 
    <link rel="stylesheet" href="//cdn.jsdelivr.net/leaflet/0.7.3/leaflet.css" /> 
    <script src="//cdn.jsdelivr.net/leaflet/0.7.3/leaflet.js"></script> 

    <!-- Load Esri Leaflet from CDN --> 
    <script src="//cdn.jsdelivr.net/leaflet.esri/1.0.0/esri-leaflet.js"></script> 


</head> 

<body> 
    <div id="map" style="width:400px;height:400px;"></div> 
    <script src="basemap.js" defer></script> 
</body> 
</html>

basemap.js

(function() { 
var map = L.map('map').setView([54.296500, -2.209221], 5); 
L.esri.basemapLayer('Oceans').addTo(map); 

var popup = L.popup(); 

})();

來源

2015-12-28 Toronto23

是您的傳奇故事還是地圖問題？你看到了什麼錯誤信息？ –

@iant我編輯了這個問題 – Toronto23

Hummmm如果你想從'file：//'運行你的文檔，你需要爲'cdn.jsd ...'使用'http：//'這樣的文字協議，（否則你的代碼看起來差不多...） –

沒有創建與「地圖」 ID必要的股利。

其添加爲：

<body> 
    <div id="map" style="width:400px;height:400px;"></div> 
</body>

下面是一個例子fiddle

來源

2015-12-29 19:21:50

我在體內添加了div，但它仍然不顯示。我點擊你的小提琴鏈接，但沒有出現。 – Toronto23

我看到了小提琴，它的工作原理。但由於某些原因，當我在html文檔中添加div id時，地圖仍然沒有顯示出來。 – Toronto23

你打電話給你匿名函數包含L.map('map')在你的HTML 頭 basemap.js腳本中，當身體和DOM還沒有準備好（他們不存在）。請致電pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it。

最簡單的解決方法是將您的basemap.js腳本標記後您的div與id="map"。通常的做法是將所有腳本標記放在HTML主體的末尾。

目前推薦的做法是將您的腳本標記保留在您的HTML頭中，但使用async (or defer) attribute，並附上需要DOM準備好的指令，以便DOMContentLoaded event。另請參閱Where is the best place to put <script> tags in HTML markup?

來源

2015-12-29 20:20:11 ghybs

我編輯了代碼。我把basemap.js腳本放在div後面。但地圖仍然不顯示。加載小冊子的腳本標籤怎麼樣？它也需要在div之後嗎？（儘管我確實嘗試過，並且地圖沒有顯示出來） – Toronto23

地圖沒有顯示使用JavaScript？

回答

相關問題