Question

有人知道为什么以下代码不起作用吗？我是传单JS和mapbox的新手，无法弄清楚我的代码存在的问题。

可为我们提供地理坐标和经济数据的GeoJSON数据位于：https://github.com/Nicknyr/Europe_Choropleth/blob/master/europe.js

<html>

<head>
<meta charset="utf-8">
<title></title>

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"   integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin=""/>

<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
crossorigin=""></script>

<script src="europe.js"></script>

<link href="https://fonts.googleapis.com/css?family=Playfair+Display+SC|Roboto" rel="stylesheet">
</head>

<body>
<div id="mapid"></div>
<script>
    var geojson;

    // Lat/Long for Prague
    var lat = 50.0755381;
    var long = 14.43780049999998;

    var mymap = L.map('mapid').setView([lat, long], 13); 

     L.tileLayer(' https://api.mapbox.com/styles/v1/mapbox/dark-v9/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1Ijoibmlja255ciIsImEiOiJjajduNGptZWQxZml2MndvNjk4eGtwbDRkIn0.L0aWwfHlFJVGa-WOj7EHaA', {
      attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
      maxZoom: 4,
      minZoom: 3,
      id: 'mapbox.dark'
    }).addTo(mymap);
</script>    

</body>

</html>

Answer 1

正如@peebee所说，您需要在地图上添加高度，然后在地图上添加geojson。

<div id="mapid" style="height: 500px;"></div>

...

var geojson = countriesData;
L.geoJSON(geojson).addTo(mymap);

Demo

为什么传单和Mapbox代码无法呈现？

1 个答案: