Краткое руководство LeafLetJS показывает серый (401 неавторизованный) - PullRequest
Новая
       9

Краткое руководство LeafLetJS показывает серый (401 неавторизованный)

0 голосов
/ 24 сентября 2019

Я только начал работать с LeafLetJs и, чтобы начать с ним, я попытался реализовать краткое руководство от LeafLetJs: https://leafletjs.com/examples/quick-start/

Я следовал инструкции и включил CSS, JS ссылки и добавил div.

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>



 <!-- Make sure you put this AFTER Leaflet's CSS -->
 <script src="https://unpkg.com/leaflet@1.5.1/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 &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: 18,
id: 'mapbox.streets',
accessToken: 'access_token_generated_from_mapbox'}).addTo(mymap);

Возвращает серый экран.и в консоли выдает 401 UnAuthorized error.Один из них упоминается ниже: 

 https://api.tiles.mapbox.com/v4/mapbox.streets/11/1022/681.png?access_token={accesstoken} 401 (Unauthorized)

Я изучил другой вопрос о StackOverflow, но этот вопрос был задан 5 лет назад, и я попробовал решения, но ничего не помогло.Ссылка на предыдущий вопрос: Карта листовки отображается серым цветом

Ссылка на Jsfiddle: https://jsfiddle.net/saadzr/3aro8eu2/2/

Любая помощь будет оценена.

1 Ответ

1 голос
/ 24 сентября 2019

Просто удалите фигурные скобки {} из L.tileLayer url

Используйте это access_token=your_access_token

вместо этого: 

access_token={your_access_token}

где your_access_tokenравно вашему токену доступа к mapbox.

и все будет в порядке.

Обновленная демоверсия

...