С разными версиями листовок api и css карта не работает - PullRequest
0 голосов
/ 30 мая 2020

В моем приложении 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 и отредактировал все пути к изображениям в определения. Но карта выглядела неправильно и выглядела так:

enter image description here

В моем коде я инициализирую карту с помощью:

        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 &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>',
            id: 'mapbox/streets-v11',
            tileSize: 512,
            zoomOffset: -1
        }).addTo(pointsMap);

Может ли проблема быть с разными версиями листовки api и css?

Как лучше разобраться?

Спасибо!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...