Карта слоев Vue не отображается в диалоговом окне Vuetify - PullRequest
0 голосов
/ 03 июня 2019

Я работаю над приложением Vuetify, которое использует Vue-Layers для отображения карт OpenStreetMap.

Отлично работает на уровне страницы, но у меня есть полноэкранное диалоговое окно Vuetify, из которого я хочу выбрать точки карты.

Карта не отображается.

Код для диалога:

<template>
  <v-dialog v-model="dialog" fullscreen hide-overlay transition="dialog-bottom-transition">
    <template v-slot:activator="{ on }">
      <v-btn color="primary" dark v-on="on">Create PID Group</v-btn>
    </template>
    <v-toolbar
        color="black"
        dark
        fixed
    >
      <v-toolbar-side-icon @click="dialog=false">
        <v-icon>close</v-icon>
      </v-toolbar-side-icon>
      <v-toolbar-title>Create PID Group</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-toolbar-items>
        <v-btn dark flat @click="onSave">Save</v-btn>
      </v-toolbar-items>
    </v-toolbar>
    <div class="mapContainer" style="background-color: pink">
      <v-sheet>

        <vl-map
            :load-tiles-while-animating="true"
            :load-tiles-while-interacting="true"
            @click="clickCoordinate = $event.coordinate"
            :controls="false"
            class="minimap"
            :z-index="100000"
        >
          <vl-view :zoom.sync="zoom" :rotation.sync="rotation"></vl-view>

          <vl-layer-tile id="osm">
            <vl-source-osm></vl-source-osm>
          </vl-layer-tile>
        </vl-map>
      </v-sheet>
    </div>
  </v-dialog>
</template>

<script>
  export default {
    name: "CreatePidGroupDialog",
    data() {
      return {
        dialog: false,
        zoom: 16,
        rotation: 0,
        clickCoordinate: undefined,
      }
    },
    methods: {
      onSave() {
        this.dialog = false
      },
    },
  }
</script>

<style scoped>
  .mapContainer {
    position: relative;
    width: 100%;
    height: 100vh;
  }

  .minimap {
    height: 168px;
    width: 300px;
    border: 1px solid black;
  }

</style>

Контейнер карты определенно имеет размер 300px на 168px

В инструментах разработчика Chrome не отображаются ошибки консоли.

Почему карта не отображается?

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