Map container not found leaflet nuxt

Question

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

использую плагин leaflet с nuxt js столкнулся с 2 последовательными проблемами:

import L from "leaflet" - window is not defined. Проблема возникла при импорте плагина в компонент

import L from "leaflet"; import 'leaflet/dist/leaflet.css'
Map container not found - возникает сразу после решения пункта 1.

Answer 1

window is not defined - возникает в следствии того, что <div id="map" ref="map"></div> еще не определен на момент загрузки плагина.

Мне помогло такое решение:

<script>
import 'leaflet/dist/leaflet.css'

let L = {};

if (process.client) {
   L = require('leaflet')
   require('~/plugins/leaflet-arrowheads');
}
...
mounted() {
if (!this.$refs.map) {
  this.map = L.map('map', { attributionControl: false }).setView({ lon: 30.315871, lat: 59.939096 }, 13);
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19 }).addTo(this.map);
  L.control.attribution({ prefix: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors' }).addTo(this.map);
  L.control.scale({ imperial: false, metric: true }).addTo(this.map);
}

Но, сразу после этого, прилетает ошибка: 2. Map container not found

Мне показалось вот это хорошим решением, но, к сожалению, мне оно не помогло. Может поможет Вам, поэтому оставлю ссылку: https://stackoverflow.com/questions/52047564/vuejs-leaflet-map-container-not-found

Свою проблему я смог решить через обычный setTimeout:

...
mounted() {
if (!this.$refs.map) {
setTimeout(() => {
    this.map = L.map('map', { attributionControl: false }).setView({ lon: 30.315871, lat: 59.939096 }, 13);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19 }).addTo(this.map);
    L.control.attribution({ prefix: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors' }).addTo(this.map);
    L.control.scale({ imperial: false, metric: true }).addTo(this.map);
  }, 1000)
}

БЛОГ НА HUSL

Map container not found leaflet nuxt

Ответы (1 шт):