問題描述

我正在使用 Ionic 5 和 Vue.js 開發一個項目，在我的一個屏幕中，我使用了一張幾乎必須覆蓋整個屏幕的傳單地圖.

I'm developing a project with Ionic 5 and Vue.js, and in one of my screens I am using an leaflet map that must cover almost the entire screen.

我正在使用 vue 的傳單庫，我的代碼如下所示:

I am using the Leaflet library for vue, and my code looks like this:

<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>

但是，當我第一次加載屏幕時，我們在瀏覽器中重新加載選項卡，我的地圖如下所示:地圖圖片

However, when i load the screen for the first time, our reload the tab in the browser, my map looks like this:Map image

我嘗試過使用 invalidateSize，檢查了 div 的高度是否發生了變化，但什么也沒有.不知道我還能做些什么來解決這個問題.任何幫助將不勝感激.

I've tried using invalidateSize, checked if the height of the div had changed and nothing. Don't know what else can I do to solve this. Any help would be appreciated.

推薦答案

它應該適用于所有類型的離子應用程序.問題是由于在離子組件之前加載傳單地圖.所以試試下面的它應該可以工作

It should work for all types of ionic application. the issue is due to loading of leaflet map before the ionic components. so try the below one it should work

ionViewDidEnter(){
   let osmMap = L.map('map');
   L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
   }).addTo(osmMap);
   osmMap.invalidateSize();
}

這篇關于僅在頂角帶有平鋪層的傳單地圖的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！