В чем может быть проблема инициализации карты 2gis для vue?

Question

[MOFO556]

API в head прописан

<script src="https://maps.api.2gis.ru/2.0/loader.js?pkg=full"></script>

Прописываю карту

<div ref="cap" style="width:100%; height:100%"></div>

Инициализация:

import DG from '2gis-maps'
    export default {
        data(){
            return{
                map: null
            }
        },
        mounted(){
            this.map = new DG.map(this.$refs.cap, {
                center: [36.165658, 51.801861],
                zoom: 13,
                minZoom: 10,
                fullscreenControl: false
            });
            DG.marker([36.165658, 51.801861], {
            }).addTo(this.map);
        },
        beforeDestroy () {
            if (this.map) this.map.remove()
        }
    }

Элемент прописывается, но пустой.

Answer 1

[0xD34F]

Нет гарантии, что к моменту монтирования вашего компонента 2GIS API будет загружен. Так что код, расположенный в mounted, следует обернуть в DG.then.

Comments

[MOFO556]

Обернула след. образом, в консоли ошибок нет, но карта так же не рисуется.

DG.then(()=> {
                this.map = new DG.map(this.$refs.cap, {
                    center: [36.165658, 51.801861],
                    zoom: 13,
                    minZoom: 10,
                    fullscreenControl: false
                });
                DG.marker([36.165658, 51.801861], {
                }).addTo(this.map);
            });

[0xD34F]

MOFO556, не рисуется, или вы её не видите? У вас в стилях указано height:100%. Сто процентов чего? Может, у родительского элемента нулевая высота.

[MOFO556]

Тьфу ты, спасибо, проломала голову, а оно как обычно. Спасибо, всё работает.