javascript - 如何防止在 Vue/Vuetify 应用程序中缩放时调整传单地图的大小
问题描述
我在使用 Vuetify 框架的 Vue.js 应用程序中遇到传单地图问题。
我试图让地图占据全屏(顶部导航栏除外),但是当我单击缩放按钮时,地图会在页面内垂直调整大小/重新定位。
这是来自 JSFiddle 的相同问题的两个屏幕截图,之前显示:
和之后(注意地图的向上移动,隐藏导航栏下方的部分缩放按钮):
据我所知,问题的出现是因为 Vuetify 框架将填充放在地图容器元素的顶部,将其(正确)定位在导航栏下方。但是,当单击 +/- 缩放按钮时,此填充似乎消失并且地图向上移动。但是,我不知道为什么填充会像这样消失(假设这是实际问题)。
如果地图明显小于页面高度(例如高度:85%;在我的完整应用程序中),则不会出现此问题。有趣的是,我只在 Chrome 中的 Fiddle 中遇到了这个问题。在 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;
}
单击缩放按钮时,Fiddle 中的地图(以及我的实际应用程序)会在导航栏下方向上跳转。如何让它保持静止,并占据导航栏下方的整个窗口?
解决方案
很可能与传单问题 #4125有关
针对这种 Chrome 特定行为的建议解决方法是防止 Leaflet 聚焦地图:
L.Control.include({
_refocusOnMap: L.Util.falseFn // Do nothing.
});
更新的 JSFiddle:https ://jsfiddle.net/s5udej9a/
推荐阅读
- html - Angular 5 - 带火力的异步管道
- java - Java - 获取侦听端口的服务器的 IP 地址
- java - 布尔字段的 SimpleJdbcInsert 问题
- java - 即使在上面的类中也找不到变量
- javascript - 来自网站的自动电子邮件
- laravel - Vue.js - Buefy 模块(无线电 btns/复选框)
- vbscript - SAP GUI VBScript 通过数据更改剪切和粘贴块
- javascript - 从外部网站截取屏幕截图
- android - 具有自定义适配器的 ListView 在第一次加载程序重新启动时滚动到底部
- jquery - Jquery Post 响应不会使用 .done 方法(linkedin oauth)