как отобразить карту листовки в указанном теге c div?

Question

Я пытаюсь отобразить карту листовки, но мне нужно отобразить карту в указанном теге c div с использованием идентификатора, подобного document.getElementById ("map"), вот так, я дал приведенный ниже код и использую vuejs.

ниже мой тег div для рендеринга карты

         <div id="map">
         </div>

ниже мой скрипт

         mounted () {
            //    L.Icon.Default.imagePath = 'assets/vendor/leaflet' TODO: make it work with webpack
            Leaflet.Icon.Default.imagePath = 'https://unpkg.com/leaflet@1.0.3/dist/images'

            let map = Leaflet.map(this.$el).setView([51.505, -0.09], 13)

            Leaflet.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
              attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors',
            }).addTo(map)

            Leaflet.marker([51.5, -0.09]).addTo(map)
              .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
              .openPopup()
          },

Answer 1

Я не знаю Vue, но обычно вам не нужно создавать document.getElementById ("map"). вам просто нужно передать идентификатор в L.map следующим образом:

let map = Leaflet.map("map").setView([51.505, -0.09], 13)

И вы должны задать высоту вашей карте div, например

 <div id="map" height="500px">
 </div>

Редактировать

Что не так? на моих codesandbox вы можете увидеть пример в html и javascrip, который отображается нормально. Вот ссылка на учебник, который использует Leaflet и Vuejs