問題描述

我正在使用 Ionic 5 和 Vue.js 開發(fā)一個(gè)項(xiàng)目，在我的一個(gè)屏幕中，我使用了一張幾乎必須覆蓋整個(gè)屏幕的傳單地圖.

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>

但是，當(dāng)我第一次加載屏幕時(shí)，我們?cè)跒g覽器中重新加載選項(xiàng)卡，我的地圖如下所示:地圖圖片

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 的高度是否發(fā)生了變化，但什么也沒有.不知道我還能做些什么來解決這個(gè)問題.任何幫助將不勝感激.

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.

推薦答案

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

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();
}

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