[英]How to prevent Leaflet map resizing on zoom in Vue/Vuetify app
使用Vuetify框架的Vue.js应用程序中的Leaflet映射出现问题。
我试图让地图占据全屏(顶部导航栏除外),但是当我单击缩放按钮时,地图会在页面内垂直调整自身大小/位置。
这是来自JSFiddle的两个相同问题的屏幕截图,之前显示:
之后(注意地图的向上移动,将导航按钮下面的部分缩放按钮隐藏):
据我所知,之所以出现此问题,是因为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;
}
单击缩放按钮时,小提琴(和我的实际应用程序)中的地图在导航栏下向上跳转。 如何使它保持静止并占据导航栏下方的整个窗口?
很可能与传单问题#4125有关
针对此Chrome特定行为的建议解决方法是防止Leaflet聚焦地图:
L.Control.include({
_refocusOnMap: L.Util.falseFn // Do nothing.
});
更新的JSFiddle: https ://jsfiddle.net/s5udej9a/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.