Question

所以我试图从Leaflet完成chloropleth地图教程，但唯一出现的是mapbox而没有别的。任何关于为什么的想法，我已经将浏览器从safari更改为firefox并且没有帮助任何其他想法？非常感谢！

 <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <title>
            The Map
        </title>
        <!--Leaflet-->
        <link rel="stylesheet" href="lib/Leaflet/leaflet.css"/>
        <script src="lib/Leaflet/leaflet.js"></script>
        <script src="data/states.geojson"></script>
        <style type="text/css">
        #map{height:400px;}
        </style>

    </head>
    <body>
        <h1>Breweries Per Capita in the US</h1>
        <div id="map"></div>
        <script>
            var map = L.map('map');
            var statesLayer = L.geoJson(states).addTo(map).setView([36.688938, -101.340000],13);


             L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
            '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
            'Imagery © <a href="http://mapbox.com">Mapbox</a>',
        id: 'mapbox.streets'
    }).addTo(map);
        </script>

    </body> 
</html>

Answer 1

正如Anton Stepanenkov所述，您的第一个<meta代码未正确关闭。
正如IvanSanchez所建议的，你加载了一个.geojson文件，如果符合json规范，它不会分配任何变量，而应该通过AJAX加载。因此，states变量很可能是undefined。如果您的.geojson文件确实分配了states（例如，它包含var states = {...};之类的语句），那么您应该使用.js扩展名重命名您的文件，因为它更像是经典JavaScript文件。
setView是一种L.Map方法，您无法将其与L.geoJson链接。
您的地图集图块图层网址模板似乎不起作用（可能是访问密钥的问题？）

关闭元标记后的工作演示，取出states，在setView上应用map并使用其他图块层：http://plnkr.co/edit/G1D05GV68IXUlwlv9Pnw?p=preview

Leaflet的问题，地图没有显示，不允许我缩小

1 个答案: