我正在使用Ionic 5和Vue.js开发一个项目,在我的一个屏幕中,我使用的传单 map必须覆盖几乎整个屏幕。
我正在将Leaflet库用于vue,我的代码如下所示:
<template>
<section class="map-container">
<l-map
ref="map"
:options="mapOptions"
:bounds="bounds"
v-on:update:zoom="zoomUpdated"
@ready="mapReady"
>
<l-tile-layer :url="'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'">
</l-tile-layer>
</l-map>
</section>
</template>
<script>
import "leaflet/dist/leaflet.css";
import Vuex from "vuex";
import { mapState, mapGetters } from "vuex";
import Leaflet from "leaflet";
import store from '../store/index'
import Vue2LeafletGoogleMutant from "vue2-leaflet-googlemutant";
import { LMap, LTileLayer, LPolygon, LImageOverlay } from "vue2-leaflet";
export default {
name: "MapBackground",
store,
components: {
LMap,
LTileLayer
},
computed: {
...mapState("maps", ["gMapsKey", "bounds", "selected"]),
},
methods: {
zoomUpdated(zoomLevel) {
if (zoomLevel <= 13) {
this.$store.commit("maps/selected", -1);
}
},
mapReady() {
this.$refs.map.mapObject.invalidateSize()
const { map } = this.$refs;
map.mapObject.on("click", this.selectTalhao);
}
},
data() {
return {
mapOptions: {
zoomControl: false,
doubleClickZoom: false,
tap: false,
trackResize: false
},
mutantOptions: { type: "satellite", redraw: true },
};
},
watch: {
},
async created() {
await this.$store.dispatch("maps/updateBounds", { point: null });
this.$refs.map.mapObject.invalidateSize()
}
};
</script>
但是,当我第一次加载屏幕时,我们在浏览器中重新加载了选项卡,我的 map如下所示:Map image
我试过使用invalidateSize,检查div的高度是否已更改并且什么都没有。不知道我还能做什么来解决这个问题。任何帮助,将不胜感激。
它应适用于所有类型的离子应用。问题是由于在离子成分之前先加载了传单图。所以尝试下面的它应该工作
ionViewDidEnter(){
let osmMap = L.map('map');
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
}).addTo(osmMap);
osmMap.invalidateSize();
}