Как предотвратить изменение размера карты Leaflet при увеличении в приложении Vue / Vuetify - PullRequest
Новая
       28

Как предотвратить изменение размера карты Leaflet при увеличении в приложении Vue / Vuetify

0 голосов
/ 30 января 2019

У меня проблема с картой Leaflet в приложении Vue.js, использующем инфраструктуру Vuetify.

Я пытаюсь заставить карту занимать весь экран (за исключением верхней навигационной панели) но карта изменяет размеры / перемещает себя по вертикали внутри страницы, когда я нажимаю кнопки масштабирования.

Вот два снимка экрана с той же проблемой из 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;
}

Карта в Fiddle (и мое настоящее приложение) подпрыгивает вверх под панелью навигации при нажатии кнопок масштабирования.Как заставить его оставаться на месте и занимать все окно под панелью навигации?

1 Ответ

0 голосов
/ 30 января 2019

Скорее всего, связано с Проблема листовки # 4125

Предлагаемый обходной путь к этому специфическому поведению Chrome - предотвратить фокусировку карты листовки: 

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

Обновлен JSFiddle: https://jsfiddle.net/s5udej9a/

...