如何防止在Vue / Vuetify应用中缩放传单地图的缩放

时间:2019-01-30 13:02:36

标签: javascript css vue.js leaflet vuetify.js

使用Vuetify框架的Vue.js应用程序中的Leaflet映射出现问题。

我正在尝试使地图占据全屏(顶部导航栏除外),但是当我单击缩放按钮时,地图会在页面内垂直调整其大小/位置。

这是来自JSFiddle的两个相同问题的屏幕快照,显示在之前:

before

及之后(请注意地图的向上移动,将导航按钮的一部分隐藏在导航栏下方):

after

据我所知,之所以出现此问题,是因为Vuetify框架在地图容器元素的顶部放置了填充,并将其(正确地)放置在导航栏下方。但是,当单击+/-缩放按钮时,此填充似乎消失,地图向上移动。但是,我不知道为什么填充会像这样消失(假设这是实际的问题)。

如果地图的尺寸​​大大小于页面的高度(例如,高度:85%;在我的完整应用程序中),则不会发生此问题。有趣的是,我只会在Chrome的小提琴中遇到这个问题。在Firefox中,地图保持其原始位置。

我已使用以下代码在JSFiddle中复制了问题:

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

单击缩放按钮时,小提琴(和我的实际应用程序)中的地图在导航栏下向上跳转。如何使其保持静止并占据导航栏下方的整个窗口?

1 个答案:

答案 0 :(得分:3)

可能与Leaflet issue #4125

有关

针对此Chrome特定行为的建议解决方法是防止Leaflet聚焦地图:

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

更新的JSFiddle:https://jsfiddle.net/s5udej9a/