如何防止在Vue/Vuetify应用中缩放传单地图的大小 [英] How to prevent Leaflet map resizing on zoom in Vue/Vuetify app
问题描述
在使用Vuetify框架的Vue.js应用程序中,Leaflet映射出现问题.
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.
这是来自JSFiddle的两个相同问题的屏幕快照,显示在前面:
Here are two screenshots of the same problem from a JSFiddle, showing before:
及之后(请注意地图的向上移动,将导航按钮的一部分隐藏在导航栏下方):
and after (note the upwards shift of the map, hiding part of the zoom buttons below the navbar):
据我所知,之所以出现此问题,是因为Vuetify框架在地图容器元素的顶部放置了填充,并将其(正确地)放置在导航栏下方.但是,当单击+/-缩放按钮时,此填充似乎消失,地图向上移动.但是,我不知道为什么填充会这样消失(假设这是实际问题).
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).
如果地图的尺寸大大小于页面的高度(例如,高度:85%;在我的完整应用程序中),则不会发生此问题.有趣的是,我只会在Chrome的小提琴中遇到这个问题.在Firefox中,地图保持其原始位置.
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.
我已使用以下代码在 JSFiddle 中复制了该问题:
I've replicated the problem in JSFiddle using this code:
JavaScript:
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?
推荐答案
可能与传单有关问题#4125
针对此Chrome特定行为的建议解决方法是防止Leaflet聚焦地图:
Proposed workaround to this Chrome specific behaviour is to prevent Leaflet from focusing the map:
L.Control.include({
_refocusOnMap: L.Util.falseFn // Do nothing.
});
更新的JSFiddle: https://jsfiddle.net/s5udej9a/
Updated JSFiddle: https://jsfiddle.net/s5udej9a/
这篇关于如何防止在Vue/Vuetify应用中缩放传单地图的大小的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!