Листовка Vuejs: Контейнер карты не найден

Question

Я пытаюсь использовать карту листовок в Vue, но получаю сообщение об ошибке:

Uncaught Ошибка: контейнер карты не найден.

Вот так выглядит мой компонент:

<template>
  <div id="app" class="container">
    Map
    <div class="col-md-9">
      <div id="mapid"></div>
    </div>
  </div>
</template>

<style scoped>
#mapid { 
    height: 800px;
}
</style>

<script>
import L from 'leaflet'

var mymap = L.map('mapid').setView([51.505, -0.09], 13);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox.streets',
    accessToken: ''
}).addTo(mymap);
</script>

Я также добавил листовки CSS и JavaScript в моем index.html заголовке.

Answer 1

Добро пожаловать в ТАК!

Когда вы пытаетесь создать экземпляр своей карты Leaflet Map , передав ей идентификатор элемента (L.map('mapid')), проблема заключается в том, что ваш компонент Vue еще не прикреплен к DOM вашей страницы. Поэтому, когда Leaflet пытается запросить последний, чтобы найти ваш Элемент, он не может найти его, отсюда и ваше сообщение об ошибке.

То же самое, если вы попытаетесь создать экземпляр в mounted ловушке жизненного цикла: ваш экземпляр компонента Vue создан и его фрагментная структура HTML построена, но все еще не прикреплена к DOM страницы.

Но вместо того, чтобы передавать свой идентификатор элемента, вы можете напрямую передать свой элемент. Обратите внимание, что вам все равно нужно сделать это в хуке mounted, чтобы убедиться, что в экземпляре вашего компонента построена структура HTML.

L.map(<HTMLElement> el, <Map options> options?)

Создание экземпляра объекта карты с учетом экземпляра HTML-элемента <div> и, необязательно, литерала объекта с Map options.

Затем, чтобы получить свой элемент, просто используйте свойство экземпляра Vue $refs и специальный атрибут ref, как описано в Руководстве по Vue> Доступ к экземплярам дочерних компонентов и Дочерние элементы :

[…] иногда вам все же может понадобиться прямой доступ к дочернему компоненту в JavaScript. Для этого вы можете присвоить ссылочный идентификатор дочернему компоненту с помощью атрибута ref.

Поэтому в вашем случае вы бы имели в своем шаблоне:

<div id="mapid" ref="mapElement"></div>

А в вашем компонентном скрипте:

import L from 'leaflet'

export default {
  mounted() {
    var mymap = L.map(this.$refs['mapElement']).setView([51.505, -0.09], 13);
    // etc.
  },
}

Дополнительное преимущество использования Vue ref над HTML-идентификатором заключается в том, что вы можете иметь несколько экземпляров компонента Vue со своей собственной картой, и Vue будет ссылаться на соответствующий элемент для каждого сценария.

Принимая во внимание, что с HTML-идентификатором, если у вас есть несколько элементов карты с одинаковым идентификатором, Leaflet будет получать только первый, каждый раз, когда вы пытаетесь создать экземпляр своей карты, что вызывает ошибку, что карта уже инициализирована для этого контейнера.