В моем приложении vue / cli 4 / vuex / bootstrap - vue я добавил листовку и получил сломанный макет. Спрашивая, у меня есть ссылка на эту отдельную ветку листовки с рисованием плиток, в которой говорится, что я не включил css в свой файл. По ссылке, которую я нашел:
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
Похоже, это единственный css на этой странице. Итак, я открыл ссылку и скопировал все css в свой. vue файл в блоке
<style lang="scss" scoped>
...
</style>
Также я загрузил все изображения из этих ссылок в project / public / images и отредактировал все пути к изображениям в определения. Но карта выглядела неправильно и выглядела так:
В моем коде я инициализирую карту с помощью:
var pointsMap = L.map('mapid', {zoomControl: false}).setView([51.505, -0.09], 7);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 5,
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>',
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1
}).addTo(pointsMap);
Может ли проблема быть с разными версиями листовки api и css?
Как лучше разобраться?
Спасибо!