Question

我正在尝试使用Leaflet生成交互式地图。但是我在渲染tilelayer时遇到了一些麻烦。我正在使用dustjs来呈现HTML，这只是给我一张空白地图，如下所示：

我最初尝试根据Quick Start指南使用MapBox完成此操作。我相信我有正确的访问令牌，

    var mymap = L.map('map').setView([51.505, -0.09], 13);

    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=XYZ', {
        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>',
        maxZoom: 18,
        id: 'USERNAME.STYLEID',
        accessToken: 'XYZ'
    }).addTo(mymap);

我从URL获得了我的样式ID：

我还尝试使用OSM来绕过获取访问令牌和项目ID的任何问题，所以我从我发现的教程中获取了这段代码：

var map = L.map('map', {
        center: [43.64701, -79.39425],
        zoom: 15
    });

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

但是这也会呈现一张空白地图。

以下是使用OSM的完整代码转储：

<head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" />
    <link rel="stylesheet" href="/styles/leaflet.css" />
    <script src="../js/leaflet.js"></script>
</head>
<body onload="onload()">
    <div id="map"></div>
    <script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
    <script>
        var map = L.map('map', {
            center: [43.64701, -79.39425],
            zoom: 15
        });

        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);
    </script>
</body>

提前感谢您的帮助。如果您需要更多信息，请告诉我们。

Answer 1

看起来tilelayer中的括号不能正常工作。在编译模板时，因此灰尘编译器可能忽略{}

中的参数

包含*.js文件，而不是内联工作。

无法渲染Leaflet tilelayer

1 个答案: