मैं Vue2Leaflet से किसी कैटलॉग मैप को फिर से कैसे लोड कर सकता हूं, अगर यह पहले छिपा हुआ था और बाद में है दिखाया गया है (उदाहरण के लिए यदि बूटस्ट्रैप पतन तत्व द्वारा छिपाया गया है)?

<template>
  <b-container>
    <b-button v-b-toggle="collapse" variant="primary">Show map</b-button>
    <b-collapse id="collapse">
      <div id="map">
        <LMap :zoom=13 :center="[47.413220, -1.219482]">
          <LTileLayer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"></LTileLayer>
        </LMap>
      </div>
    </b-collapse>
  </b-container>
</template>

<script>
import Vue from 'vue'
import { LMap, LTileLayer } from 'vue2-leaflet'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import 'leaflet/dist/leaflet.css'

Vue.use(BootstrapVue)
...
export default {
  ...
  components: {
    LMap,
    LTileLayer
  }
}
</script>

<style>
div#map {
  height: 300px;
  width: 500px;
}
</style>
1
m13r 12 मई 2019, 23:16

1 उत्तर

सबसे बढ़िया उत्तर

मैंने इसे मैप ऑब्जेक्ट से invalidateSize फ़ंक्शन का उपयोग करके काम किया है (जैसा कि यह समस्या) और संक्षिप्त तत्व की @shown विशेषता का उपयोग करके:

<template>
  <b-container>
    <b-button v-b-toggle="collapse" variant="primary">Show map</b-button>
    <b-collapse @shown="reloadMap()" id="collapse">
      <div id="map">
        <LMap ref="map" ...>
          ...
        </LMap>
      </div>
    </b-collapse>
  </b-container>
</template>

<script>
...
export default {
  ...
  methods: {
    reloadMap: function () {
      this.$refs.map.mapObject.invalidateSize()
    }
  }
}
</script>
2
m13r 12 मई 2019, 20:16