Блог

Я использую Vue 2.x и этот плагин: https://www.npmjs.com/package/mapbox-gl-vue

Я показываю карту с некоторыми маркерами на ней. Карта не является модальной (абсолютная позиция — это может быть проблемой). Когда карта загружается в первый раз, она не может выбрать нужный размер.

CSS:

 .mapboxgl-map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  margin: 20px 5px 0;
  transition: all 0.3s;
}
 

код компонента:

 <modal>
...
 <mapbox
        :map-options="{
            style: mapStyle,
            center: [lat, lng],
            zoom: 3,
            onStyleLoad: map => map.resize()
         }"
        @map-load="loaded"
          />

</modal>
 

загружена функция ()

  loaded(map) {
      map.resize()
      map.on('idle',function(){
        map.resize()
      })

      ...
    },
 

В течение первых 1-2 секунд размер карты нарушается, и это создает плохой UX. Карта соответствует родительскому контейнеру, но она размыта и странно растянута.
Вызов функции map.resize(), похоже, решает проблему, но, похоже, функция вызывается слишком поздно…. Когда я смогу запустить функцию map.resize(), чтобы быстрее изменить размер этой карты?

Если это не причина…Что может вызвать это?