Vue Layers Map 未显示在 Vuetify 对话框中

Question

我正在开发一个使用 Vue-Layers 显示 OpenStreetMap 地图的 Vuetify 应用程序。

在页面级别工作正常，但我有一个全屏 Vuetify 对话框，我希望能够从中 select 映射点。

地图没有显示。

对话框的代码是：

<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 x 168px

Chrome 开发人员工具中没有显示控制台错误。

为什么地图没有显示？

Answer 1

我遇到了同样的问题，发现在显示对话框时您需要刷新地图。在 vl-map 组件上放置一个 ref="map" 并执行以下操作（在打字稿中）：

    this.dialog = true; // show the dialog
    // at the next tick refresh the map so you are sure it detects it is now visible
    this.$nextTick(() => {
      (this.$refs.map as any).refresh();
    });

Vue Layers Map 未显示在 Vuetify 对话框中

Vue Layers Map not showing on Vuetify dialog

vuetify.js

vuelayers