How to prevent Leaflet map resizing on zoom in Vue/Vuetify app

问题

I'm having a problem with a Leaflet map in a Vue.js application using the Vuetify framework.

I'm trying to get the map to occupy the full screen (except for the top nav bar) but the map resizes/repositions itself vertically within the page when I click on the zoom buttons.

Here are two screenshots of the same problem from a JSFiddle, showing before:

before

and after (note the upwards shift of the map, hiding part of the zoom buttons below the navbar):

after

As far as I can tell, the problem is occurring because the Vuetify framework puts padding on the top of the map container element, positioning it (correctly) below the navbar. However, when the +/- zoom buttons are clicked, this padding seems to vanish and the map shifts upwards. However, I have no idea why padding would disappear like this (assuming that this is the actual problem).

This problem doesn't occur if the map is made significantly less than the height of the page (e.g. height: 85%; in my full application). Interestingly, I only get this problem in the Fiddle in Chrome. In Firefox the map stays in its original position.

I've replicated the problem in JSFiddle using this code:

Javascript:

new Vue({
  el: '#app',
  data: () => ({
    map: null,
    tileLayer: null
  }),
  mounted: function(){
    this.map = L.map('map').setView([38.864720, -77.088544], 12);
    this.tileLayer = L.tileLayer( 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/rastertiles/voyager/{z}/{x}/{y}.png',
      {
        maxZoom: 18,
      });
    this.tileLayer.addTo(this.map);
  }
})

HTML:

<div id="app">
  <v-app id="map-example">

    <v-toolbar color="indigo" dark fixed app style="z-index: 1000;">
      <v-toolbar-title>Application</v-toolbar-title>
    </v-toolbar>
    <v-content>
      <v-container fluid>
        <v-layout>
          <div id="map">

          </div>
        </v-layout>
      </v-container>
    </v-content>
  </v-app>
</div>

CSS:

body {
  margin: 0;
  padding: 0
}
.container {
  padding: 0;
  width: 100%;
  margin: 0;
}
#map {
  height: 500px;
  width: 100%;
  z-index: 100;
}

The map in the Fiddle (and my actual application) jumps upwards under the navbar when the zoom buttons are clicked. How do I get it to stay still, and occupy the entire window below the navbar?

回答1:

Very probably related to Leaflet issue #4125

Proposed workaround to this Chrome specific behaviour is to prevent Leaflet from focusing the map:

L.Control.include({
  _refocusOnMap: L.Util.falseFn // Do nothing.
});

Updated JSFiddle: https://jsfiddle.net/s5udej9a/

来源：https://stackoverflow.com/questions/54441260/how-to-prevent-leaflet-map-resizing-on-zoom-in-vue-vuetify-app

标签

javascript

css

Vue.js

leaflet

vuetify.js