Question

我有一个使用 leaflet.js 的HTML页面，由于某种原因我无法显示地图。

我将 mapbox 中的API放在正确的位置，但没有地图。以下是JS代码，标记和CSS，看看我搞砸了什么。

HTML：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Learn Maps</title>
    <link rel="stylesheet" type ="text/css" href="style.css" />
    <link rel="stylesheet" href="night_class/leaflet-0.7.3/leaflet.css" />
    <script src="night_class/leaflet-0.7.3/leaflet.js"></script>
    <script>
        window.onload = function() {
            //every part goes here
            var map = L.map('map').setView([45.46, -122.739], 4);
            L.tileLayer('https://a.tiles.mapbox.com/v4/rodneyabutler.db94e2a6/page.html?access_token=pk.eyJ1Ijoicm9kbmV5YWJ1dGxlciIsImEiOiJiYzd2SVVvIn0.R7uMtxUochQCrDmpiwg6QQ#4/45.51/-122.69', {
    attribution: 'Map data &copy; <a href="http://mapbox.com">Mapbox</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
    maxZoom: 18
}).addTo(map);
        }

    </script>


</head>


<body>

<div id="map">MAP</div>

</body>
</html>

CSS：

body{
    margin: 0px;
}

#map {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    height:300px;
    width:50%;
    border: solid crimson 4px;
    /*background-color:#000;*/
}

Answer 1

使用Leaflet

，您需要在创建地图之前使用保存地图的div，否则地图对象不知道去哪里。尝试在地图div下方移动脚本标记。

最终的脚本应该是这样的：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head lang="en">
<head>
<meta charset="UTF-8">
<title>Learn Maps</title>
<link rel="stylesheet" type ="text/css" href="style.css" />
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />

</head>


<body>

<div id="map"></div>

<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

<script>

        window.onload = function() {

        var tileLayer = L.tileLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}.png", {maxZoom: 18, attribution: 'MRLC, State of Oregon, State of Oregon DOT, State of Oregon GEO, Esri, DeLorme, HERE, TomTom, USGS, NGA, EPA, NPS, U.S. Forest Service'});

        var map = new L.map('map', {
            layers: tileLayer
        }).setView([45.46, -122.739], 4);

    };

</script>

</body>
</html>

我无法让我的地图显示在传单JS中

1 个答案: