瓷砖图仅在顶角的单张地图

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 workionViewDidEnter(){ let osmMap = L.map('map'); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { }).addTo(osmMap); osmMap.invalidateSize();} 这篇关于瓷砖图仅在顶角的单张地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！