我刚刚开始使用LeafLetJs并开始使用它,我尝试从LeafLetJs实施快速入门指南:https://leafletjs.com/examples/quick-start/
我按照说明进行操作,并包含CSS,JS链接并添加了一个div。
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og==" crossorigin=""></script>
<div id="mapid"></div>
然后在CSS端包括此CSS:
#mapid { height: 180px; }
然后在JavaScript部分中:
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={access_token_generated_from_mapbox}', {
attribution: 'Map data © <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: 18,
id: 'mapbox.streets',
accessToken: 'access_token_generated_from_mapbox'}).addTo(mymap);
这将返回灰屏。并在控制台中给出多个401未经授权错误。其中之一提到如下:
https://api.tiles.mapbox.com/v4/mapbox.streets/11/1022/681.png?access_token={accesstoken} 401 (Unauthorized)
我研究了StackOverflow上的另一个问题,但是这个问题是5年前提出的,我已经尝试过解决方案,但是没有任何效果。链接到上一个问题:leaflet map shows up grey
链接到Jsfiddle:https://jsfiddle.net/saadzr/3aro8eu2/2/
任何帮助将不胜感激。
最佳答案
只需从L.tileLayer
网址中删除大括号{}
用这个access_token=your_access_token
代替这个:
access_token={your_access_token}
其中
your_access_token
等于您拥有的mapbox访问令牌。你应该没事的
Updated Demo