时间戳

首页 > 解决方案 > 如何在特定的 div 标签中显示传单地图？

javascript - 如何在特定的 div 标签中显示传单地图？

问题描述

我正在尝试显示传单地图，但我需要使用像 document.getElementById("map") 这样的 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()
          },

标签： javascriptgoogle-mapsdictionaryvue.jsleaflet

解决方案

I don't know Vue, but normally you don't need to make a document.getElementById ("map"). you just have to pass the id in L.map like that

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

And you have to give a height to your div "map", for example

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

Edit

What's wrong ? on my codesandbox you can see an example in html and javascrip which is displayed normally. Here is a link to a tutorial that uses Leaflet and Vuejs

推荐阅读