[英]Vue Layers Map not showing on Vuetify dialog
I'm working on a Vuetify application that uses Vue-Layers to display OpenStreetMap maps.我正在开发一个使用 Vue-Layers 来显示 OpenStreetMap 地图的 Vuetify 应用程序。
Works fine at page level but I have a full screen Vuetify dialog that I want to be able to select map points from.在页面级别工作正常,但我有一个全屏 Vuetify 对话框,我希望能够从中获得 select map 点。
The map does not get displayed. map 不显示。
The code for the dialog is:对话框的代码是:
<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>
The map container definitely has size of 300px by 168px map 容器的大小肯定是 300px x 168px
There are no console errors displayed in Chrome developer tools. Chrome 开发者工具中没有显示控制台错误。
Why doesn't the map show?为什么 map 不显示?
I had the same problem, figured out you need to refresh the map when the dialog is shown.我遇到了同样的问题,当显示对话框时发现您需要刷新 map。 Put a ref="map" on the vl-map component and do the following (in typescript):在 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();
});
I am on Vue2.x + Vuetify + Vue2leaflet.我在 Vue2.x + Vuetify + Vue2leaflet 上。
I tried many things and finally what worked for me was to cover the with a.我尝试了很多东西,最后对我有用的是用 a 覆盖。 My code reads as:我的代码如下:
<v-lazy>
<v-img>
<l-map>
.... rest of the code
</l-map>
</v-img>
</v-lazy>
This takes inputs on v-lazy from https://medium.com/@elralimi.lamia/leaflet-vuejs-vuetify-map-not-showing-well-in-a-modal-with-grey-parts-9a5d551ea472 .这需要来自https://medium.com/@elralimi.lamia/leaflet-vuejs-vuetify-map-not-showing-well-in-a-modal-with-grey-parts-9a5d551ea472的 v-lazy 输入。 v-img was suggested in some other SO response.在其他一些 SO 响应中建议使用 v-img。
Other options that I tried but failed were: this.map.invalidateSize();我尝试但失败的其他选项是:this.map.invalidateSize(); , this.map.remove();, this.$nextTick(() => {...}. , this.map.remove();, this.$nextTick(() => {...}。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.