Javascript快速入门教程

Question

我一直在浏览quick start指南，但没有太多成功。

我的代码如下：

 <link rel="stylesheet" 
href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
   integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
   crossorigin=""/>

<!-- Make sure you put this AFTER Leaflet's CSS -->
 <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
   integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
   crossorigin=""></script>

<div id="mapid"></div>

mapid { height: 180px; }

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


 L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y} 
   ?access_token={accessToken}', {
    attribution: 'Map data &copy; <a 
href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> 
contributors, Imagery © <a 
href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox/streets-v11',
    tileSize: 512,
    zoomOffset: -1,
    accessToken:'XXXX'
}).addTo(mymap);

在#mapid命令上似乎有点不对劲。请问大家有什么建议吗？

Answer 1

快速入门指南示例说明“在此示例中，我们将使用Mapbox的静态tiles API中的mapbox/streets-v11 Tiles (为了使用Mapbox中的tiles，您还必须请求一个访问令牌)”。

没有它它就不会工作。

带有OpenStreetMap瓷砖的宣传单的Here is a working JSFiddle，我想这就是你要找的。

而且你的CSS还缺少一个#！应为#mapid { // }