Javascript 如何在特定部门标签中显示传单地图？

我正在尝试显示传单地图，但我需要使用类似于document.getElementById（“地图”）的id在特定的div标记中显示地图，就像这样，我已经给出了下面的代码，我正在使用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()
          },

mounted（）{
//L.Icon.Default.imagePath='assets/vendor/传单'TODO:使其与webpack一起工作
传单.Icon.Default.imagePath='1https://unpkg.com/leaflet@1.0.3/dist/images'
让map=传单.map（this.$el）.setView（[51.505，-0.09]，13）
tileLayer（'https://{s}.tile.osm.org/{z}/{x}/{y}.png'{
属性：“©；参与者”，
}).addTo（地图）
传单。标记（[51.5，-0.09]）。添加到（地图）
.bindPopup（'一个漂亮的CSS3弹出窗口。
易于定制。'）
.openPopup（）
},

我不知道Vue，但通常不需要制作document.getElementById（“映射”）。 你只需要像那样在地图上传递id

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

例如，你必须给你的div“map”指定一个高度

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

编辑

怎么了？在我的电脑上，你可以看到一个html和javascrip的例子，它是正常显示的。下面是一个使用