Я работаю над своим заданием, и мне было интересно, можете ли вы указать на ошибку, которую я совершаю в своем коде.
Для этого задания я создаю карту с помощью сторонней библиотеки и API.
Шаги:
Запрос токена доступа из Mapbox (ссылки на внешний сайт.)
Создайте документ HTML 5.
Ссылка на файлы листовок CSS и JavaScript.
<link rel="stylesheet" h..t@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
<script s..t@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
Установите для просмотра карты следующие координаты: Широта: 39,678121 Долгота: -104,961753.
Добавьте уровень масштабирования 15.
Добавьте слой тайлов и примените максимальное увеличение 20.
Добавьте маркер, используя предоставленные координаты.
Пока , вот что у меня:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Basic map</title>
<script src='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.css' rel='stylesheet' />
<link rel="stylesheet" href="css/leaflet.css">
</head>
<body>
<div id="map"></div>
<script src="js/leaflet.js"></script>
</body>
</html>
CSS
/* required styles */
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
width: 100%;
}
JS
L.mapbox.accessToken = 'pk.eyJ1IjoicmVkYnVsbDg0IiwiYSI6ImNrZGNvYm9qeDB6cW0ycW16MmF0Y2szbW0ifQ.Fru8Yiy4GdL66v3o7769zg';
var map = L.mapbox.map('map')
.setView([39.678121, -104.961753], 15)
.addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11'));
// L.marker is a low-level marker constructor in Leaflet.
L.marker([39.678121, -104.961753], {
icon: L.mapbox.marker.icon({
'marker-size': 'large',
'marker-symbol': 'college',
'marker-color': '#fa0'
})
}).addTo(map);
L.tileLayer('https://stamen-tiles-{S}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png', {
maxZoom: 20,
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
}).addTo(map);
Для по какой-то причине файл HTML не загружается (пустая страница), используя следующее в разделе заголовка документа HTML:
<link rel="stylesheet" h..t@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
<script s..t@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
Однако мне удалось получить файл HTML для загрузки, используя следующие ссылки в разделе заголовка документа HTML:
<script src='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.css' rel='stylesheet' />
Не могли бы вы помочь с исправлением этой проблемы и других проблем, которые вы могли заметить?