Question

我使用html和javascript代码创建了一个地图，但它没有显示出来。我的代码好吗？我是否以正确的方式调用Esri底图？

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();

})();

Answer 1

您没有使用“map”id创建必要的div。

将其添加为：

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

以下是fiddle

的示例

Answer 2

当您的HTML head 中的basemap.js脚本中包含vignette("constparty", package = "partykit")的匿名函数，当正文及其DOM尚未就绪时（它们尚未“存在”）在记忆中。）

请参阅pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it。

最简单的解决方法是将您的basemap.js脚本标记放在您的div L.map('map')之后。通常的做法是将所有脚本标记放在HTML正文结束之前。

目前推荐的做法是将脚本标记保留在HTML标题中，但使用async (or defer) attribute，并附加需要DOM准备好DOMContentLoaded event的说明。另请参阅Where is the best place to put <script> tags in HTML markup?

地图没有显示使用JavaScript？

2 个答案: