Vue組件內無法加載傳單

Question

我想創建一個傳單地圖作爲Vue組件，但我有一些困難的入門。我通過npm安裝了Leaflet

我哪裏錯了？ console.log（Leaflet）正在返回一個Leaflet對象，但我無法讓地圖展開和渲染。

一些方向，將不勝感激

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

<script> 
    // import leaflet here? 
    import Leaflet from 'leaflet'; 

    export default { 
     components: { 
      Leaflet 
     }, 

     created() { 
      console.log(this); 
      console.log(Leaflet); 
     }, 

     ready() { 
      this.map = L.map('map').setView([51.959, -8.623], 14); 
      L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 
       attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
      }).addTo(this.map); 
     } 
    } 
</script> 

<style> 
    #map { 
     height: 100%; 
     width: 100%; 
     margin-top: -24px; 
    } 

    /* default legend, layer styling from leaflet template */ 
    .info { 
     padding: 6px 8px; 
     font: 14px/16px Arial, Helvetica, sans-serif; 
     background: white; 
     background: rgba(255,255,255,0.8); 
     box-shadow: 0 0 15px rgba(0,0,0,0.2); 
     border-radius: 5px; 
    } 
    .info h4 { 
     margin: 0 0 5px; 
     color: #777; 
    } 
    .legend { 
     text-align: left; 
     line-height: 18px; 
     color: #555; 
    } 
    .legend i { 
     width: 18px; 
     height: 18px; 
     float: left; 
     margin-right: 8px; 
     opacity: 0.7; 
    } 
</style> 

Answer 1

我只是做這個，但我需要底圖也應（Bing）。

leafletWrapper.js

const L = require('leaflet') 
require('leaflet-bing-layer') 

export default L 

LeafletMap.vue

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

<script> 
import L from 'leafletWrapper' 

export default { 
    name: 'leaflet-map', 
    props: ['center', 'zoom', 'minZoom', 'maxZoom', 'markers'], 
    data() { 
     return { 
     mapObject: {}, 
     markerLayer: {} 
     } 
    }, 
mounted() { 
     const bingKey = 'foo' 

     this.mapObject = L.map(
     "map", { 
      center: this.center, 
      zoom: this.zoom, 
      minZoom: this.minZoom, 
      maxZoom: this.maxZoom 
     } 
    ) 

     L.tileLayer.bing({bingMapsKey: bingKey, imagerySet: 'Road'}).addTo(this.mapObject) 

    }, 
    beforeDestroy() { 
     this.mapObject.clearAllEventListeners() 
    } 

    } 
</script>